Web development » CSS

IE6 css bug

Mon, 20 Jul 2009 10:18:47 +0000

In general if a div width is not set, the div box is as wide as the content within it. If there is padding, borders, or margins, this will be added to the box width. So, a 100px box with 0 padding and 0 border would have 100px width and will render the same in IE and Mozilla. But, if 5px padding is added, the Mozilla box would be 110px wide. 100px + 5px left padding + 5px right padding = 110px wide. While the IE box would still be 100px.

So Internet Explorer does not render the div box correctly. To have the same look on different browser, you need to hack your css for IE browser.

You can do the below code:

div {
width: 100px;
padding: 5px;
}
* html div {
\width: 110px;
}

The first div will work on Firefox and the second div won’t work on Firefox but will work on IE.

How to use different css on different browser

Sun, 19 Jul 2009 05:02:27 +0000

Cross Browser Compatibility is a huge issue in the website development with many browsers in the market. But luckily most of them uses Internet Explorer and Firefox. Sometimes different version of browser also have different output like the display in IE8 and IE6. To tackle this you can use different css for different browser.

Here’s the code:

if lte IE 6 means if browser is lower than equal (lte) IE 6. If you want to use the css specifically to IE 6 then: . There are also gte (greater then equal) for browser above or equal a spesific browser. Here’s the summary:

lte IE 6 -> IE 6 and all version lower
lt IE 6 -> version below IE 6
IE 6 -> only IE 6
gt IE 6 -> version higher IE 6
gte IE 6 -> IE 6 and all version higher

Download the full code here.

Flat Input box with CSS

Mon, 29 Jun 2009 06:03:49 +0000

input
{
border: 1px solid;
}

If you want to change the input box background do as follow:

input
{
border: 0px solid;
}