Firstly, a caveat: I am not a designer. I am a server side programmer who dabbles in web design and development. I do not know CSS as well as someone who designs websites for a living would. So take this advice with a grain of salt.
Today @RealtorPaul asked why his site wasn’t displaying right in Firefox, when it was displaying fine in IE. This is a common enough occurrence in web design, and it’s due to the fact that different browser vendors use different render engines, and each render engine has it’s own share of bugs.
Bugs are qualified by measuring against a set of standards laid down by the W3C as a target for render engines. Among the various browsers, IE typically has the longest history of the worst standards support around, with IE 6 being the #1 criminal, and admittedly IE 7 is much better, but still flawed.
When users develop a HTML interface that they check primarily against IE, testing how it looks in IE, etc, they’ll often get a nasty shock when they check in a Gecko (Firefox, etc) browser, as their designs fall apart and generally look horrible.
While the ideal way to trouble shoot these problems is to go over your CSS code with a fine tooth comb and understand how all the various rules are working, and understand how all the browsers render those rules, that’s not very practical. Luckily, the 80/20 rule tends to come into play here, meaning the largest problems between browsers are caused by a small selection of things. Here is a list of things you can check against:
- Do you have a valid doctype in your HTML code? A valid doctype will look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
You can find a list of available doctypes at the W3C website. I personally recommend the HTML 4.01 doctype over the XHTML doctypes, for reasons that deserve a topic of their own. To use a doctype, put it as the first thing in every HTML page in your website.
- Are you using a lot of padding and margins? One of the differences between Firefox and IE (just to name two) that most people hit is the difference in the box model. IE renders it’s box model incorrectly, and as a result, can cause a lot of grief when using a lot of padding and margins.
- Are you using properties that do not have 100% support in all browsers? Some CSS features are not implemented completely in all browsers, and their support is patchy at best. You can find a list of these CSS features at quirksmode.org.
- Are you floating a lot of elements? Floating elements removes them from the regular flow of the page, and as a result, can have some funky results on your design. Floating elements can be awesome when you know how to use it, but can be confusing as hell when you don’t. Make sure you know what you’re doing when you float stuff.
- Are you changing the flow of elements with the “display” property? Certain elements are block level elements (they sit on their own line, and push elements beside them down) and some are inline elements (they happily co-exist in the middle of other elements). If you’re changing how some elements display, be aware that other properties (I’m looking at you, “width” and “height”) don’t work on inline elements. Know what happens when you change how things are displayed.
Those are the CSS concepts that get me the most. Many problems are solved just by adding a valid doctype to your page, however if you’re still finding you’re having problems, give the other items on the list a look.
This list is far from exhaustive, nor is it even very in depth. However, it’s a good place to start looking, and it might point you in the right direction. With the state of the browser market as it is, debugging CSS is as much an art as creating the design for a site is.
When debugging CSS, you might want to start with just bare bones HTML, and slowly add rules as you go, and isolate that way which rules are the ones that are messing everything up. Also, keep in mind that CSS is cascading – which means you need to put your more specific rules at the bottom of your stylesheet, general rules at the top, otherwise your general rules will override your specific rules.
The best way I’ve found to debug CSS is to incrementally apply styles, and use a tool like Firebug to turn rules on and off dynamically, so you can see what happens. The most important thing to remember is that even experienced developers have to deal with browser incompatibility. If you find you’re struggling, keep at it, and don’t lose heart. It’s all part of designing a website.
