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'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
}

(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. Take a look at the following example:

Example text

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

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

Example text

Much better!

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

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

What are you working on?

  • End-to-end customer experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Customer loyalty & retention

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • User experience of digital touchpoints

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Online sales & conversion optimisation

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Digital strategy

    Get ahead of the competition with a customer-centred digital strategy designed to deliver long-term business success.

  • Application & product design

    Deliver the best experience for your customers with intelligent digital applications tailored to your business goals and customer needs.

  • Mobile & tablet strategy

    Improve your mobile & tablet propositions with innovative, cutting-edge interface designs that work for you and your customers.

Webcredible turns 10

Happy Birthday to us

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation