Internet Explorer & CSS issues

Trying to get CSS-based websites to look the same across all browsers can often be difficult. Many of the problems however lie with Internet Explorer implementing CSS commands differently to other, more standards compliant browsers. All is not lost, however, as many of the differences you see across browsers are caused by the same Internet Explorer CSS issues...

1. Page elements are narrower in Internet Explorer

Perhaps the most famous IE and CSS problem is Internet Explorer's misinterpretation of the CSS box model, which can cause page elements to be narrower in IE. Every HTML element is essentially a box, the width of which is the total of its margin, border, padding and content area. Imagine the following CSS rule:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}
This means that each div is 50em wide in total. This amount is made up of a 30em wide content area, and a 4em padding, 1em border and 5em (invisible) margin on both the left and right sides.
In IE however, the border and padding are included in the width of the content, as opposed to added on. In IE therefore, the width of the content is only 20em (30em less 5em padding and border on either side), and the total width of the div is just 40em.
This CSS box model problem occurs in IE5.x, and can occur in IE6, depending on how you declare the ISO value in the HTML code. There are two ways of doing this:

The first command is placed on the very first line of the HTML document and the second can be placed anywhere within the . In order for XHTML pages to validate it's compulsory to use one of these commands. The W3C recommends using the first command as the second will be phased out in the future.
By using the first command however, Internet Explorer 6 will render the CSS box model incorrectly, just like in version 5 browsers. To fix the box model problem, you'll need to insert a CSS hack to send different width values to different browsers. The CSS hack you use will depend on which ISO value you use, and therefore which versions of IE are rendering the box model incorrectly.
To fix up only IE5.x, use the following CSS commands:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em
}
To fix up all versions of IE, use these CSS commands:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}




2. Text spilling out of its container in non-IE browsers

Internet Explorer, unlike other browsers, will expand borders and background colours so text doesn't spill out of its containing element.


If you're viewing this in Internet Explorer, the box should look fine. In all other browsers the text is spilling out of the right-hand side of the box. The box has been assigned class="box" and has the following CSS commands assigned to it:
.box {
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
}
Non-IE browsers will adhere to the width: 40px CSS command, which is why the box doesn't expand in these browsers. IE instead interprets width as min-width, and therefore expands the box to fit the text (the same applies with height and min-height).
To ensure the text doesn't spill out of the box in all browsers, you'll need to use the following CSS rule, in addition to the first one:
html>body .box
{
width: auto;
min-width: 40px
}
IE will ignore this CSS command, as the command has html>body at the front of it (see the article, CSS hacks and browser detection2 for more on this). As such, this CSS command is only for non-IE browsers. The first CSS rule, width: auto, cancels out the original width rule. The second command, min-width: 40px then assigns a minimum width to the box, so the box will always expand to fit the text.
Check out the box again (you won't see any difference in Internet Explorer, so open this up in another browser to see the change)



3. Disappearing background images
IE has a very freaky bug where it likes to make background images (and sometimes even text - particularly if there are floated elements around) disappear. This often happens when you scroll up and down on a web page and you can usually make the background re-appear by refreshing the page.
Obviously you won't want your site visitors to have to refresh a page to see a background image in full! A freaky solution to this freaky problem is to insert the CSS command, position: relative into the CSS rule containing the background image:
.foo {
background: url(filename.jpg);
position: relative
}
Occasionally this won't work, so another solution is to assign a width or a height to the element with the background image. You may not want to assign a height or width, so a solution is to assign a height of 1% for Internet Explorer. Because IE interprets height as min-height (see point 2 above) this CSS rule won't affect the appearance:
.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}
The height: 1% CSS command is cancelled out by the height: auto CSS command. Internet Explorer doesn't understand html>body, so by inserting this in front of the second CSS rule this whole CSS rule is ignored by IE.





4. Widths only working on IE

Every HTML element is either a block or an inline element. Examples of block elements include

, ,
,

and
. Example of inline elements include , , , and .
One of the characteristics of inline elements is that you can't change the width of an inline element. The following CSS rule shouldn't, in theory, work:
span {
width: 100px
}
This CSS rule won't work, except in Internet Explorer where each span will now have a width of 100px. In every other browser however, the width of the span will simply be the width of the number of characters contained in the element. The solution? Make the span a block level element:
span {
width: 100px;
display: block
}
(Turning the span into a block element will make the width command work in every browser, but it will also make the span begin on a new line. To combat this, you could assign float: left to the span.)



5. Unstyled version of web page appearing in IE
When your website loads up in Internet Explorer, does an unstyled version of the page appear for a second or two, before the styled version kicks in this? If so, your website may be suffering from what's known as the Flash Of Unstyled Content3 (or FOUC).
If you're using the @import directive (e.g. ) to call up your CSS file then this phenomenon may be happening on your website in IE. It's weird, there's no logical explanation for it, but this problem obviously needs to be fixed.
The simple solution to this illogical problem is an equally illogical solution - insert either a link or a script element into the header:

It doesn't matter which one you insert (or even if you insert both). If you provide a print stylesheet, using the link element to reference it (as indicated in the example above), then you'll never see the FOUC phenomenon.



6. Fixed width web page not sitting in centre of window

Got a fixed width website and can't get it to centrally align in the window in Internet Explorer? Or you can get it to centrally align in IE but not in any other browser? Fear not, it's not your fault! Unfortunately, the correct way of centrally aligning content through CSS doesn't actually work in IE:
#container {
width: 770px;
margin: 0 auto
}
The second command, margin: 0 auto, basically gives our containing element an automatic margin on the left and right, thereby positioning the containing element in the centre of the browser window.
IE however, will need slightly different commands to make this work:
body {
text-align: center
}
#container {
width: 770px;
margin: 0 auto;
text-align: left
}
This will then centrally align the container in IE too. To prevent the text from centrally aligning too, we insert text-align: left into the container div.