Internet Explorer & CSS issues

Introduction

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:

<?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:

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
}

(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:

.box
{
    width: 40px;
}

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 width as min-width, and therefore will expand the div 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 & 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:

.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 <div>, <p>, <h1>, <form> and <li>. Example of inline elements include <span>, <a>, <label>, <strong> and <em>.

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 spa<code>n.)

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:

<script type="text/javascript" src="scripts.js"></script>
<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:

#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.

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Boberta

United States

Member

No Biography provided

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Internet Explorer has a number of CSS issues. Find out what these issues are and how to get around them, so your website looks the same in all browsers.

Type	Article
Licence
First Posted	13 Feb 2006
Views	55,966
Bookmarked	41 times

WindowsVisual-Studio
HTMLDevIntermediate