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].
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:
<link href=”/css/ie-only.css” media=”screen” rel=”stylesheet” type=”text/css” />
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:
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.
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.
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.
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!