I primarily fill my time freelancing doing PHP development work, but from time to time I find myself doing your standard Photoshop PSD to HTML/CSS implementation. If you’ve ever done this before you know how much of a nightmare it can be to get things right in Firefox, Safari, and all of the IE’s, but it is doable! Being a bit of a perfectionist, here’s my method for getting everything pixel perfect.
Style Sheet Reset
Start off on a level playing ground and clear out all of the settings that different browsers may inflict on you. I typically use Yahoo’s YUI Reset CSS, but there are plenty of others out there [google].
Start Styling
I typically do my initial implementation in FireFox 3.5 if for no other reason than the Firebug plugin. This is great for live editing of CSS, seeing why images aren’t loading, as well as AJAX and javascript debuging.
IE Selectors
So now that we have a fairly functional design, we fire up Windows to see what we have. I usually run IE8 in a Virtual Machine running the RC of Windows7. With this and the Internet Explorer Developer Toolbar, you generally get good results in IE8, and can simulate what it would likely look like in IE7 by using ‘Compatiblity Mode‘ (though there are some differences). So how do we fix these?
The key is to use an IE only stylesheet and a few hacks. To make a style sheet only be loaded by IE we’ll use a Conditional Comment:
<!–[if IE]>
<link href=”/css/ie-only.css” media=”screen” rel=”stylesheet” type=”text/css” />
<![endif]–>
Now in this file if we define a property, it will be used by all versions of IE, but if we prepend an asterisk (*) to the property name, IE 8 will ignore it, and if we prepend an underscore (_) to the property name then both IE 7 and 8 will ignore it. So with this hierarchy of hacks we can now create something like the following:
#header {
width: 100px; /* Used by all versions of IE */
*width: 110px; /* Used in IE 7 and below */
_width: 120px; /* Used in IE 6 and below */
}
Note that, in the relevant browsers, each of these properties are being overridden by the subsequent values and so it is crucial that we maintain this order of 1) no prefix, 2) asterisk prefix, 3) underscore prefix to get the results you are looking for. However it is perfectly fine to use any combination of these if you want to achieve the same result in different versions of IE.
Extraneous markup
If you can’t get your code to work without hacks or strange CSS tricks, don’t be afraid to add an extra <span> to those lists of links, or a clearing <div> here and there. Doing so can some times make your CSS cleaner, and lets face it, more people are going to be looking at the website than the code.
Last resort – Javascript
With these tricks you should be off and running, but in-case you inherited a project that used lots of unsupported CSS tricks (like the ‘+’ sibling selector and IE6), you can resort to javascript. IE7-js is a project created to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
Other Browsers
Now we have a site that works in Firefox and the 3 major IEs, but I haven’t mentioned anything about the other Grade A Browsers. If you look at various Google Analytics to find out for yourself.
In practice however, rarely do I find an issue with Safari that does not come up in Firefox and if we’ve done things in a fairly standard way, we should be ok in Opera.
Summary
That should do it. With these few tricks, you should be able to get your website pixel perfect in the most common browsers with out too much work. If you find this useful, or have any other tips, leave a comment!