Understand the Problem


Perhaps the most important piece of advice we can pass on is that understanding why a problem exists is the key to fixing it. This can only come from experience and time spent working with the code.

Say you're noticing an extra 3 pixels of horizontal space before a floated element in Internet Explorer for Windows, and only that browser. If you weren't aware that Internet Explorer for Windows suffers a bug with floated elements, you might try negative margins, relative positioning, or a few CSS hacks to adjust the positioning of other surrounding elements to account for the unexplainable gap.

But if you knew ahead of time that Internet Explorer for Windows suffered a unique bug that adds precisely 3 pixels of margin to some floated elements, you wouldn't have to guess and test the above methods.

The problem with trying to fix a bug that defies explanation is that it cascades. After adding many unexplainable workarounds on a single page, you might have built a patchy framework that relies on the rendering glitches. Debugging layout problems later in the design process is harder when the earlier problems haven't really been solved.

Armed with the knowledge of what's actually causing the situation you're seeing, attacking bugs becomes a much more straightforward process. The Crib Sheet is a start, and countless sites are available that go into more detail about specific browser rendering issues. We highly recommend starting with the excellent Position Is Everything (www.positioniseverything.net).

(Incidentally, in case you're wondering about the 3 pixel bug, this site has a nice fix for it and many other Internet Explorer-specific bugs, at www.positioniseverything.net/articles/hollyhack.html#haslayout.)



    The Zen of CSS Design(c) Visual Enlightenment for the Web
    The Zen of CSS Design(c) Visual Enlightenment for the Web
    ISBN: N/A
    EAN: N/A
    Year: 2005
    Pages: 117

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net