disappearing background in IE

[thesheep]

I have a dynamic width 3 column layout. 2 outer columns are absolutely positioned.

div#contentWrapper { position: relative; width: 100%;}

div#contentLeft { position: absolute; width: 220px; top: 20px; left: 20px; }

div#contentMiddle { margin: 0 30% 0 250px; padding: 20px 10px; }

div#contentRight { position: absolute; right: 2%; top: 15px; width: 27%; }

div#introduction { margin: 0 0.5em; background-color: #aaa; }

The <div id="introduction"> is placed within the middle box. However, for some reason in IE6 the background colour disappears. If I put only a border (no background) then the border is rendered OK. But if I put a border AND a background, neither is drawn. What's going on?

[iamlost]

Welcome to the wacky world of IE ...

The simple solution is the "generic" IE fix:
add position: relative; to div#introduction.

If this causes difficulty because of other page code an alternative is to add a "symbolic" height hack for IE(win) after the css for div#introduction. Note: remember to hide it from the more (in this instance) IE(mac):

/* Hack for IEwin hide from IEmac \*/
* html div#introduction {height: 1%;}
/* End hide from IEmac */

[thesheep]

Thanks a lot, adding { position: relative } worked fine in this case. Which particular bug is this, so I can read up on it and learn more?

[iamlost]

I never seem to be able to keep the various "names" of the various IE CSS bugs straight. I think this is likely some iteration of the peek a boo bug ... though that is usually a float problem ... I think ...

Do a search (lots of stuff here on WebmasterWorld too) for IE css bugs and the reading will never stop!

Glad it solved your prob.

[createErrorMsg]

Check out positioniseverything.net's page on IE bugs fixed by the HollyHack (that 1% height thing). Also, a search on IE Display Bugs will likely lead you to information about this particular family of bugs.

<note> I believe applying display: inline-block; also 'cures' this bug, although that property will not currently validate.</note>