Workarounds

SKIP TO:
TWO BOXES
THREE BOXES
FOUR BOXES
IE6 AND N6.1

AFFECTS: ALL BOXES
BROWSERS: IE5WIN

PROBLEM: ie5win does not recognize whitespace:nowrap.

WORKAROUND: Must be combined with nobr in the HTML for ie5win.

AFFECTS: ALL BOXES
BROWSERS: IE5WIN

PROBLEM: ie5win - all line-height to font-size ratios must agree or the box gets pushed around.

WORKAROUND: None. Set them to agree. (Not tested on ie5.5win yet.)

Update: This one item has cause a lot of mail, so some detail is in order. What I mean is if you set your line height to, say, 150% for your body text, then you'd better do it for your H1, H2, etc. It's a little obscure, and only bites in a difficult pixel-perfect design like the one I tried here. I strongly suggest you don't worry about it, just keep it in mind if something mysterious is giving you trouble in ie5win. Update 2: It's over a year later and I have not seen this bug again. Right now I'm just leaving it here as a reminder to explore further when I get time.

AFFECTS: ALL BOXES
BROWSERS: IE5WIN IE5.5WIN

PROBLEM: ie5win ie5.5win box width misinterpretation.

WORKAROUND: Interesting fix by Tantek Celik. Eric Costello adds that if you need to use the voice-family attribute, putting it in Body where it would normally go would cascade into the box div, so there shouldn't be any trouble.

Does anyone know if you use the fix alone, and someone with a voice browser surfs your page, does the fix trip the voice browser in any way? I'm wondering if we should then always add a real voice-family in Body.

AFFECTS: ALL BOXES
BROWSERS: IE5WIN

PROBLEM: ie5win box border misplacement.

WORKAROUND: None, but it seems to be a minor aesthetic glitch that doesn't spill into other setting considerations, and with narrow borders isn't even noticeable. ie5.5win not tested for this yet.

AFFECTS: ALL BOXES EXCEPT ABSOLUTE
BROWSERS: IE5WIN IE5.5WIN

PROBLEM: ie5win and ie5.5win double floating box side margins.

WORKAROUND: Set box side margins to 0 and use body side margins, or use absolute positioning.

AFFECTS: ALL BOXES
BROWSERS: O5.02WIN O5MAC

PROBLEM: o5.02win o5mac will not right align correctly. When there is no scroll bar, o5.02win o5mac reserves space there and inserts the background colour.

WORKAROUND: None.

AFFECTS: ALL BOXES EXCEPT PLAIN
BROWSERS: O5.02WIN O5MAC

PROBLEM: o5.02win o5mac content margin-top is short in floating and absolute boxes, but is correct in the plain box used in the centered example. Seems to ignore anything under 20px, then subtract 20px from anything over.

WORKAROUND: Fixed! Read the extensive Content Placement section.

AFFECTS: ALL BOXES
BROWSERS: IE5WIN IE5.5WIN

PROBLEM: ie5win and ie5.5win slide content margin-top underneath the box padding-top.

WORKAROUND: Fixed! Read the extensive Content Placement section.

AFFECTS: TWO BOXES
BROWSERS: ALL, BUT CRITICAL IN IE5WIN IE5.5WIN

PROBLEM: Content too wide for a box will spill out in o5.02win and n6.01win, in ie5win and ie5.5win the box will be made larger, shoving other boxes around.

WORKAROUND: Be careful of fixed width content... especially PRE text where a font size change can cause this, like when you upgrade a site-wide style later, or when a user may be have an override sheet to enlarge text.

AFFECTS: TWO OR MORE FLUID BOXES
BROWSERS: ALL, BUT CRITICAL IN N6.01WIN

PROBLEM: Be careful mixing px and percentage. On the 2 fluid box example I had everything horizontal as a percentage except the 5px borders which cannot be in percentage. With the box widths as 42% there was no problem under o5.02win or ie5win and ie5.5win, but n6.01win ran out of room and forced the second box to sit below the first. Widths are now 41%.

WORKAROUND: If you must mix, give yourself adequate leeway and test thoroughly.

AFFECTS: TWO TOUCHING BOXES - first example
BROWSERS: O5.02WIN N6.01WIN IE5MAC O5MAC

PROBLEM: When splitting the screen with two fluid absolute boxes, one right, one left, o5.02win o5mac ie5mac will have about a 2px gap between. n6.01win will sometimes also do this depending on the amount of content, window size, and wind direction.

WORKAROUND: Use floating boxes.

AFFECTS: TWO TOUCHING BOXES - second example
BROWSERS: O5.02WIN N6.01WIN IE5MAC O5MAC

PROBLEM: When splitting the screen with two floating boxes, one right, one left, o5.02win o5mac ie5mac will have about a 2px gap between. n6.01win will sometimes also do this depending on the amount of content, window size, and wind direction.

WORKAROUND: Use two left floating boxes.

AFFECTS: TWO TOUCHING BOXES - third example
BROWSERS: IE5WIN IE5.5WIN

PROBLEM: When splitting the screen with two floating boxes, both left, ... ie5win and ie5.5win 's preference for making oversized content resize the box becomes a problem. On samples with apparantly plenty of room the second box can end up shoved below sometimes. Play with window width and window height when testing for this one. With exactly the same width window, but different heights, you can trigger this, even though both heights have enough content to require scrolling.

WORKAROUND: If you have any fixed width content, test in ie5win and ie5.5win exhaustively.

AFFECTS: THREE BOXES - first example
BROWSERS: N6.01WIN N6MAC

PROBLEM: In the simple 3 column example where there are two absolute boxes bordering a plain box. n6.01win n6mac for some reason cannot see the margin-top for the plain box. Remarkably it does not display this error when the same three columns are below a full width top box.

WORKAROUND: body>#middle { float: left; } This must be a css2 declaration because ie5win and ie5.5win choke on it.

AFFECTS: THREE BOXES - second example
BROWSERS: IE5WIN IE5.5WIN O5.02WIN IE5MAC O5MAC

PROBLEM: ie5win and ie5.5win screw up anyway. n6.01win n6mac has the content beginning at the right height in all three columns. o5.02win o5mac has the wrong height but the same in all boxes. ie5win and ie5.5 have all the wrong heights, are different in absolute and floating boxes, and are different from each other in the floating box.

I had an elaborate workaround for dealing with ie5win when it really mattered that all three line up, but that's out the door now.

And it get worse! o5mac put the middle box's right margin about 163px from the window edge, but gets the right box's right margin right. I have no idea why. Help, please, mac folk. Play with the code and identify the cause. Doesn't occur in o5.02win. Wait! Yes it does if I push resolution around as well as boxes and switch between normal and full screen mode; Opera full screen does not display a scroll bar ever and also doesn't display the Opera scroll bar problem. But here's the catch, the right side of the middle box is never 190px away from anything, which is the correct distance. Why is it letting the middle box expand that much? Right box is unaffected because it is set absolute right.

WORKAROUND: Scream. Run around the block. Do push-ups. Punch a soft wall. David Bowie Singles on the deck helps. Update: Fixed! Read the extensive Content Placement section.

Let's make all the boxes absolute.

AFFECTS: THREE BOXES - third example
BROWSERS: IE5WIN IE5.5WIN

PROBLEM: Nope ... ie5win and ie5.5win refuse to make the middle box bigger than the content width. I tried every combination of tags to go with postition:absolute that I could think of.

WORKAROUND: None. Dammit. Everything else works with this example, except content starting height in Opera, which is going to have to become a separate topic from box positioning.

Okay, I really didn't want to do this, but I've just spent hours building every other combination I can think of. Take the first simple example that worked on everything but n6.01win n6mac, remove the 20px top margin from the middle box and add it to the body. Which gives us example 4.

AFFECTS: THREE BOXES - fourth example
BROWSERS: IE5WIN IE5.5WIN O5.02WIN

PROBLEM: Just the regular content starting height issues.

WORKAROUND: Fixed! Read the extensive Content Placement section.

AFFECTS: THREE TOUCHING BOXES
BROWSERS: IE5WIN IE5.5WIN

PROBLEM: Because ie5win puts the content's margin-top outside of a plain box, in the three columns touching example ie5win showed a nasty 20px gap above the middle box.

WORKAROUND: Fixed! Read the extensive Content Placement section.

AFFECTS: THREE TOUCHING BOXES
BROWSERS: IE5WIN IE5.5WIN

PROBLEM: all other browsers display the content at the right height in all boxes. [What? Have to go back and find out why opera didn't before then.] But both ie5win and ie5.5win start at the wrong height, and differently in the different boxes, but at least the same as each other this time.

WORKAROUND: Fixed! Read the extensive Content Placement section.

AFFECTS: FOUR BOXES
BROWSERS: IE5WIN IE5.5WIN O5.02WIN IE5MAC O5MAC

PROBLEM: One plain across the top. 3 columns under; two absolutes and one plain. All the boxes sit correctly. n6.01win n6mac places the content correctly. o5.02win o5mac places the content correctly in the plain boxes, but not in the absolutes.

ie5win gets all wrong, but the content in the plain top box and the two absolutes begin the same, but not the middle plain box

ie5.5win also has the content in the plain top box and the two absolutes begin at the some incorrect height, but the content starts at the correct height in the middle plain box.

The only difference in tags between top and middle box is the top has height declared, while the middle extends with content. You guessed it: if you declare a height for the middle box, all content begins at the same incorrect heights. I'm not sure I want to know why.

ie5mac gets all the content right BUT places the entire middle box low, and by different uneven amounts according to Rory and CodeBitch. Love to know why that never happened on my box lesson from a month ago. Since I did some serious voodoo to content margins then to get ie5win sorted, I suspect this is a content issue again.

WORKAROUND: Fixed! Read the extensive Content Placement section.

AFFECTS: FOUR TOUCHING BOXES
BROWSERS: IE5WIN IE5.5WIN IE5MAC

PROBLEM: Same as in the 3 columns touching example, the 4 boxes touching example has the 20px glitch in ie5win. ie5win displays that weird incorrect starting height inconsistancy, plus puts middle column's top too low. ie5mac sets the middle box too low, but by different amounts according to Rory and CodeBitch. Time to call it a night.

WORKAROUND: Fixed! Read the extensive Content Placement section.

IE6 AND N6.1

It seems IE6 and N6.1 for Windows work with all of the final solutions. IE6 does introduce new CSS bugs, but none of them are apparent here to my knowledge. If you find that's wrong, please do let me know.

"sleep is the mother of courage" - e.e.cummings.