Fix It Fast: Rapid IE6 CSS Debugging
Doug Avery, Former Senior Developer
Article Category:
Posted on
IE6: We all hate it, and we all have to work with it (well, most of us). The most frustrating phase of buildout is often the final struggle with this Browser From Hell, but maybe (just maybe) we're struggling too much. When I help friends with IE6 bugs, I'm sometimes surprised at how long they've been stuck on a single problem, or how they've painted themselves into a corner with hacks and fixes. Then I remember that I used to be like that, grinding away for hours at simple float issues, or pulling my hair out over list spacing.
Why do we have so much trouble learning to debug for IE6?
We don't know! There are a lot of bugs out there, and it takes a while before you can intuitively spot them. If we can't identify a behavior, it's easy to throw up our hands and say "Augh, it's just BROKEN!"
We don't want help! Many a designer has spent hours on a problem simply because they didn't ask for help or Google it. With a language as straightforward as CSS, you can eventually solve most problems just by blindly changing stuff (over and over), but changing stuff doesn't mean you're learning.
We're not sure how to start! Debugging is a weird process: At any point, you could come across THE SOLUTION, which would be GREAT, and it always seems like it's JUST AROUND THE CORNER. This constant bait-and-switch means that we don't settle into a solid process for debugging, which, in the end, means debugging can take much longer than it should.
So, is there a way to shortcut through some of the hair-pulling and learn good debugging right from the start? MAYBE. The following is my cycle of preventing, catching, and fixing bugs in IE6. If I could, I would email it to myself in 2004, but until I figure out how to do that, posting it here will have to do:
Preventing Bugs
You can avoid a lot of IE6 bugs right out of the gate, by writing around some of the common stuff.
Planning the structure:
- Avoid tight fits of floated elements. If you have four floats squeezed into an area, consider removing the pad/margins on the last and floating it right instead. Tight fits can lead to the "repeating content" bug in IE6.
- Plan to put either a width or a padding on an element, but not both. Instead, place padded elements inside a fixed-width element. This way, you don't have to wrangle with IE6's box model issues.
- Be aware of vertically short (~15px or less) elements, which might require some hacks later on.
- Be aware of sized floats appearing in content areas, which might trigger float model.
- Think about content that might expand past your box size. This might trip up IE, as it tries to expand the element to fit larger content.
Writing the markup:
- Keep floated elements from being adjacent to absolutely-positioned elements, and thus avoiding the "peekaboo" bug.
- Be careful to close every tag. Firefox sometimes closes tags for you while rendering, but IE6 will be less forgiving.
Writing the CSS:
- Start off with a reset to clear out unwanted browser defaults.
- Avoid #id.classname selectors...these have a tendency to break in IE6.
- Avoid left and right margins on floats...this means fewer fixes to make later.
- Be aware of using bottom: and right: when absolutely positioning. These might require some special IE6 attention later.
Defining Bugs
The key to quickly fixing bugs is to acquire a subtler understanding of what's actually happening when rendering goes wrong. There are a lot of questions to answer about the element that will give us a clearer picture of what's happening:
- Is it the wrong size?
- Has it expanded?
- Has it disappeared?
- Or, has it simply moved?
- Is it being covered by another element?
- Is it not stretching properly?
- Is the background disappearing?
- Is it happening in IE7 as well?
Sometimes you can't easily pick out what's happening, so it helps to add some borders:
div { border: 1px solid red !important; }(Note: If this happens to magically FIX your problem, try using position:relative or zoom:1 on the element)
Once you've isolated the bug down to one or two elements, glance over the CSS and see if there are any unique or particularly troublesome properties on the element. This'll help you with the investigation. Once you have the browser, the effect, the element, and the css property in hand, it's time to investigate.
Investigate Bugs
Now that you know what your bug is, let's see what someone else thinks about it. PositionIsEverything has a good list of common bugs, but I usually go straight to Google.
A few recent, fruitful searches:
li ol number 1 ie7
float negative margins ie6 doubling
id class ie6 bug
ie7 not showing images
As I said in the last step, the clearer you are about what your bug is doing, the easier it is to narrow it to a single browser, element, or CSS property. 90% of the bugs you run into will be from the same small group of common issues, so searching with the right terms should turn up some good answers.
Fixing Bugs
Many rendering bugs are fixed with a few common techniques:
- Properly clearing floats (with a clearing div or clearfix)
- Trimming the left/right margin on a flow in half (to compensate for IE6 margin doubling)
- Using word-wrap: break-word or overflow:hidden (to combat expanding boxes)
- Applying position:relative to the element or its parent, or
- Applying the "zoom: 1" property to the element
You should be able to find more specific issues, or true oddities, out there on the web somewhere.
Note that all fixes should be done in special stylesheets linked using conditional comments. This way, your fixes stay separate from the main stylesheet, easy to find and work with later (and, it keeps your main stylesheet valid). Writing comments about fixes (especially weird ones) is a great idea too, and it keeps the next designer on the project from needing to go through the same process.
The next time you're stuck on an IE6 bug, give this process a try - define, investigate, fix, and then think about how to avoid next time. If you're still having problems (it's pretty likely), keep at it, or leave a comment about what I missed.
