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:
border: 1em solid green;
This means that each
50em wide in total. This amount is made up of a
30em wide content area, and a
1em border and
margin on both the left and right sides.
In IE however, the "
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
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:
<?xml version="1.0" encoding="iso-8859-1"?>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
The first command is placed on the very first line of the HTML document and the second can be placed anywhere within the
<head>. In order for XHTML pages to validate, it is 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:
border: 1em solid green;
To fix up all versions of IE, use these CSS commands:
border: 1em solid green;
(See the article, CSS hacks & browser detection for more on these hacks.)
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.
Let's say a div has been assigned
class="box" and has the following CSS commands assigned to it:
Non-IE browsers will adhere to the
width: 40px CSS command, so the box won't expand to fit any text that's longer than
40px. IE however interprets
min-width, and therefore will expand the div to fit the text (the same applies with
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:
IE will ignore this CSS command, as the command has
html>body at the front of it (see the article, CSS hacks & browser detection 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.
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:
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
width, so a solution is to assign a
1% for Internet Explorer. Because IE interprets
min-height (see point 2 above) this CSS rule won't affect the appearance:
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
<li>. Example of inline elements include
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:
This CSS rule won't work, except in Internet Explorer where each
span will now have a
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:
(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
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 Content (or FOUC).
If you're using the
@import directive (e.g.
<style type="text/css">@import "styles.css";</style>) 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:
<link rel="stylesheet" href="styles.css" type="text/css" media="print" />
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:
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:
margin: 0 auto;
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
This article was written by Trenton Moss, who's crazy about web usability and accessibility. He's the founder of Webcredible, a web usability and accessibility consultancy and is extremely good at usability training and usability testing.