Strategy for Fixing Layout Bugs in IE6?

Question

Generally, what\'s the best way to tackle a layout bug in IE6? What are the most common bugs or problems that one should look for when trying to figure out why your page sud

Answer 1

The box model is usually the culprit. Basically what this means is that any div you are trying to position and use unsupported CSS with will cause this problem.

You may find it happens if you are using min-{width,height} or max-{width,height}.

this provides a great reference for checking compadibility with different versions.

http://www.aptana.com/reference/html/api/CSS.index.html

Answer 2

I use Rafel Lima's Browser Selector when I need to tweak differences between IE/Standards browsers. It greatly reduces using "hacks" in your HTML to solve common problems.

You can target CSS statements for different browsers, or even different versions of browsers (Hello IE 6). It's very simple to implement, but requires the user has JavaScript turned on (most do).

.thing { ....}

.ie .thing { ....}

.ie6 .thing { ....}

Answer 3

http://www.positioniseverything.net/ will certainly address your problem.

It provides comprehensive and in-depth descriptions of browser bugs along with options to work around them. A must read, in my opinion,

Answer 4

We had a floating div issue that was only evident in a particular version of IE6. It was fixed by downloading the latest service pack.

Answer 5

One good way to start learning about how IE happens to be mangling the page is to turn on red borders on different elements with CSS (border: 1px solid red;). This will immediately tell you whether it's a margin problem or a padding problem, how wide the element really is, etc.

Answer 6

how do you define layout bug? the most frustrating layout implementation (i don't know if this should be defined as bug) in IE is we need to always specify style="display:inline" in the HTML <form> tag so that a blank line won't appear to disturb the form layout.