Simon Battersby

Overview

Getting a page to look identical in different browsers is, sadly, far from simple..

This is because:

• different browsers implement CSS styling in different ways
• some browsers don’t support some css selectors
• some browsers have bugs in their implementation of css

This is a simplified version of what I have learned since January 2009, when I leaped head first into css without the benefit of a crash helmet. I’ve also included a summary of the most common problems. This is not intended to be a comprehensive list, but rather to highlight the sort of painful things I came across, and in the hope that others might find it useful too…

Approach

Listed here are the steps you should take to give yourself the greatest chance of building pages that display consistently across different browsers. Following these alone will not necessarily bring consistency, but if you don’t follow them you’ll make it harder for yourself.

Valid code

This is the biggest step you can make towards consistency between browsers. Without valid code you’re going to really struggle. So, use the W3C html validator and css validator while you are coding to check you haven’t made any silly mistakes.

Set defaults in your css

Different browsers will apply different default paddings and margins, even to common elements like paragraphs. This caused me no end of confusion when I started. The best way to deal with this is to set all your margins and padding to zero at the start of your css:

*{margin:0;padding:0}

Build for Firefox, not for IE

When you’re building a page, check it in Firefox first. Firefox renders css much more accurately than IE. If it looks OK in Firefox, then it will probably look OK in Chrome, Opera and Safari, assuming that a reasonably recent version of these browsers is used. I have had only a few things work OK in Firefox but then break any of the other three. In particular Safari4 and Chrome are virtually identical in their css implementations because they’re based on the same underlying Webkit technology. Once it looks OK in Firefox, then have a look at IE and fix the IE issues.

Use Firebug

Firebug (below) is a handy little plug-in for Firefox that lets you view the css applied to any particular element simply by highlighting it on screen. If you highlight code in the html Firebug will shade the item and display margins and padding. You can even amend the css (temporarily) to test fixes to any issues.

is far and away the most useful tool for debugging layouts, and arguably the best thing since sliced bread.

Use the IE Developer Toolbar

The IE Developer Toolbar (below) is similar to Firebug. It isn’t quite as sophisticated and doesn’t show margins and padding. However, it’s still pretty useful for trying to sort out IE, and in particular for hasLayout issues (see below).

It comes as an add-on to IE6 and IE7. IE8 incorporates it as standard, although in IE8 you can’t see the css and the page at the same time, which seems a backward step to me.

Browser-specific issues

Disclaimer again: this is far from a comprehensive list, just the most common and painful problems, and perhaps those that a newcomer is most likely to bounce off. Let’s tackle the most difficult browser first…

IE and “hasLayout”

IE6 and 7 use a Microsoft proprietary property called “hasLayout” which is set to true or false depending upon other CSS properties. The absence of hasLayout causes a variety of layout related issues. If your code is valid, and the page looks OK in everything else, but wrong in IE7 and IE6, there’s a good chance it’s a hasLayout issue. This can be identified using the IE developer toolbar which will show whether an element possesses hasLayout or not (a value of -1 means it does). If this does look like the problem then applying height:1% will sometimes fix the problem. This is easy to try using the IE developer toolbar.

Here’s a fuller explanation.

IE and <hr> styling

IE7 and under apply a standard margin top and bottom of 8px to the horizontal rule element. This is added to any margin you define in your CSS file. This manifests as wider gaps before and after your hr. The only way out of this is to use conditional css to target IE.

IE6 and 7 colour the hr via the color property, everything else uses background-color. Similarly, IE6 and IE7 don’t apply a border.

So, if you’re really determined to use hr then your css needs to be something like:

hr{
 width: 100%;
 height: 2px;
 background-color: #A7A669;
 color: #A7A669;
 border:none;
}

Here’s a fuller explanation. An alternate approach to using <hr> is to use the border property, which has more predictable cross browser behaviour.

IE and <ol> <ul> paddings and margins

It’s fairly frequent to want to remove the bullet points on a list, on a menu for example, and get rid of the indent. IE applies the indent via margin as standard, and everything else does it via padding. So you need to set both margin and padding to 0 to remove the indent across all browsers.

IE6 and extra margin on floated elements

In fact this is more accurately “doubled margin on floated elements”. This manifests in IE6 if a floated element has a margin on the same side it is floated. So, for example if an element has css:

#left{float:left;margin-left:20px...}

then IE6 will double the left-margin and you’ll end up with a left margin of 40px. Nice.

There’s a number of possible solutions, fortunately. The easiest is to apply display:inline to the floated element, which fixes it, due to some hidden quirk in IE6. That’s what I’ve done on this page, for example. Alternately, it may be possible to dodge the issue entirely by applying padding or margin-right to the adjoining elements instead. Finally, a clumsy but effective solution is just to apply an extra div in your html to contain the floated element, and apply the margin-left to the enclosing element instead of the floated element.

Here’s a fuller explanation of the issue.

IE6 and 3px horizontal gaps

Where a floated element is adjacent to a non-floated element, IE6 may introduce a 3px horizontal gap between the two elements. It isn’t padding, and it isn’t margin, it’s just a gap. This is most often described as a “3px text jog”, which has an ugly effect – see this article for details. However I have more often come across this on tightly packed layouts where it manifests as a fairly catastrophic “float drop” in IE6. I haven’t seen this described in detail elsewhere, so I wrote this page describing the issue and some solutions.

I personally spent hours and hours trying to understand this one in February 2009, and it was only when I measured the gap and found it to be 3px wide that I was able to find anything at all about it.

IE6 and hover

IE6 doesn’t support the css pseudo-class :hover on anything other than an anchor (<a>) element. This most commonly causes problems on css styled menus, like the one on this site, where in order for them to work properly you require some sort of hover behaviour on an <li> element.

The best solution I’ve found (although the css doesn’t validate) is to use this little csshover widget here…

IE6 and transparent PNGs

IE6 also doesn’t support transparency on PNG images, rendering these instead as a pale blue background. In some circumstances it might be possible to add a coloured background to the PNG to match your page’s background, or even to use a GIF instead, as IE6 does support transparent GIFs. Alternately you could try this little fix. NOTE: If you are by any chance using this with a standalone IE6, then it doesn’t seem to work, although it’ll work OK with a “proper” version of IE6.

IE5.5 and Text size

You really shouldn’t need to go there, but if you absolutely must…and if you are using font-size descriptions rather than setting the font-size in ems, pixels or pts, like, font-size:medium, IE5.5 will apply the next size up throughout, so your page will look like it’s shouting at you. The only solution to this is a hack or conditional css. Fortunately hardly anyone uses IE5.5 any more…

Firefox 2

You might well not bother these days, but FF2 doesn’t support display:inline-block. You can sometimes work around this in a way that avoids the need altogether, but if it’s essential there are some Mozilla properties that behave pretty much like inline block. It’s sometimes possible to sort FF2 via something like this:

#element{
display:-moz-inline-box;
-moz-box-orient:vertical;
display:inline-block}

Here FF2 will read the first display statement and apply the proprietary value -moz-inline-box and then ignore the second display statement because it doesn’t recognise it. The optional -moz-box-orient setting sets up which way round the “inline box” is oriented – set to horizontal or vertical if required. FF3 will recognise both display statements but apply the second one (because it comes last), and the -moz-box-orient will be recognised but will have no effect. Everything else will only recognise the second statement. This is not a perfect solution; your css won’t validate and it might not always work.

Chrome 1-6, Opera 9/10, Safari 4

These are pretty good. The only oddity I’ve found is inconsistent application of overflow:auto in certain circumstances, which affects all of these. Chances are this isn’t going to bother you. If your page is right in FF but not in Chrome/Safari, chances are it’ll be an issue with clearing floats.

Firefox 3

This is the only browser I’ve found which has no oddities or quirks – at least for a beginner. And that’s why you should test your code with Firefox…

General solutions

CSS hacks

It is possible to use “hacks” to address css issues. These use, in general, one inconsistency in a browser to cancel out another, and can involve some ugly looking css like this:

body{
font-size: x-small;
voice-family: "\"}\"";
voice-family:inherit;
font-size: small;
}

In this example , IE5.5 will read the first font-size declaration and then ignore the rest because of all those slashes and things, whereas other browsers will read the whole lot and apply the last font-size instead. A bit clumsy.

Conditional comments for css and html

A cleaner and better approach than hacks is to use conditional css. This can be used to target specific IE versions.This page uses conditional css as follows:

<!--[if lte IE 6]>
<link href="../simon_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

This tells IE6 or earlier to use an additional css file called simon_ie6.css. So here I can put any styling that I might need to sort out IE6 in this file alone. This means my main css file is nice and clean, and at the point when nobody uses IE6 any more, which might be a long way away, then I can just get rid of the file entirely. The conditional css reference must be positioned below the “standard” css, since the last css statement will always take precedence. Other variants of the initial statement are:

<!--[if IE 5.5000]> - applies to IE5.5 only
<!--[if lt IE 7]> - applies to IE less than 7
<!--[if gt IE 7]> - applies to IE greater than 7
<!--[if lte IE 7]> - applies to IE less than or equal to 7
<!--[if gte IE 6]> - applies to IE greater than or equal to 6

Note the space between “IE” and the version number, and note the three zeroes for IE5.5.

There’s also a way of using conditional comments to hide something from IE, although you probably won’t need to do this very often. Use the following statement:

<!--[if !IE]>-->
<p>This will only appear in non-IE browsers.</p>
<!--<![endif]-->

There’s a conditional comments test page here if you want to see an example.

Testing different versions of IE

You can normally only install one version of IE at a time on your PC. However if you use Windows XP you could install “unofficial” standalone versions, which you can find here.Don’t even try and install on Windows 7 – not only will they not work, but you’ll mess up Windows as well. I’ve used the IE5.5 and IE6 versions. If you do try these, then this article is helpful in getting the standalone versions to behave themselves. If you’re on Windows 7 then you’ll have to use MS Virtual PC and XP Mode to run IE6 and IE7.

Further reading

There are lots of websites which will give you loads of information if you want it. Here are a few I’ve found very useful.