views:

806

answers:

11

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 suddenly looks like a monkey coded it?

+1  A: 

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

Nick Berardi
The box model is hardly ever the culprit. For some reason, people have latched onto the phrase "box model" and use it as a magical talisman to explain everything wrong with Internet Explorer. It does *not* mean "unsupported CSS on a div". The major problems are caused by bugs, see Yadyn's answer.
Jim
Exactly my word.
petr k.
Jim, it actually is the box model. You may not like the word, but it is the best word used to describe the problems. What else do you call it when IE 6 treats the total size of the box differently than other browsers?
Nick Berardi
Also it is very hard to say it is a bug, bug means something was coded wrong, I don't believe that is the case, Microsoft has been very consistent in keeping their layout, "box model" the same.
Nick Berardi
+4  A: 

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,

petr k.
That has saved my ass so many times.
dawnerd
also it's nice that is discusses not only IE-specific bugs, but also those found in Opera and other browsers.
petr k.
+2  A: 

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.

Alex King
A: 

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.

Si Keep
Um...that's not a fix. That only hides the problem on your computer...it will still show up for anyone else that doesn't have that service pack.
Beska
Yes Beska you are right of course, my point was more that this is still something to be aware of when investigating these kind of bugs.
Si Keep
A: 

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.

+9  A: 
Yadyn
A: 

This question I believe has far too much scope.

Validate your code, and if pain persists, well, good luck.

The only real solutions, as with any other ballpark bug type are to google for a solution, or ask somebody who knows, ( ie: give the exact problem to us here at stackoverflow ).

You can use the IE Dev toolbar to glean an Idea, but many of the bugs are random, inexplicable, and esoteric. IE: the guillotine bug, the random item duplication bug, etc etc, the list goes on, and you can spend hours literally goofing with stupid variables everywhere and achieve nothing.

Kent Fredric
A: 

In theory, use CSS compatible with IE6 layout bugs, utilise only well known workarounds (css and html filters) and code for them in a way that wont break forward compatibility, test for quirks/strict mode.

In reality, resort to tables.

Marc Gear
resorting to tables is unprofessional, at the very least
alex
A: 

I have a simple strategy that works every time.

First, I develop the site using commonly accepted CSS to look good in Safari and Firefox 3. See w3schools.com for details on browser support.

Then, I go into IE6 and IE7 and alter the CSS using conditional includes.

This is hack free and lets you handle different browsers (IE6 and IE7 have separate issues).

Most of the issues you'll find come from unsupported features in IE (like min-width), errors in the box model (IE adds unseen extra padding (3px) to some boxes), or positioning issues. Go for those first as they are often the issue.

Matt Farina
A: 

A common problem is padding not getting added to the width of a block element. So for layout div's, avoid using padding and instead use elements within them to define the padding.

qui
A: 

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 { ....}

Diodeus