Hello List, At www.src.org <http://www.src.org/> I am encountering an IE6 positioning problem that seems (?) to be in the Peek-a-boo family of bugs. I have reviewed descriptions of IE positioning bugs online, but I have not seen this particular scenario described, nor have I been able to find a workaround.
In essence, I am trying to incorporate some ad space below a left-side CSS-only menu. In IE6, the initial rendering matches that of FF2, and looks correct. But when I roll the mouse cursor over the menu items, DIV#rb-gnav appears to suddenly acquire 20px of additional padding-bottom; the user sees the ad block jump down vertically. In the distilled case of this problem, which I have included below my sig, the markup is structured as two DIVs (#rb-gnav=menu, #rb-special=ad) nested inside a container DIV (#rb-side). DIV#rb-gnav contains the unordered list that comprises the menu. The menu, simplified here, is marked up as an unordered list. In the CSS, I've added border and background-color rules to highlight the structure. As you can see, I have plastered position:relative and float:left everywhere it made sense, but that does not seem to have helped. I also had temporarily tried to force 'haslayout' with a 'zoom:100%' rule sprinkled here and there, but without noticeable effect. Any insights or workarounds will be very much appreciated. Thanks, Mark -------------------- Mark Shelman Semiconductor Research Corporation (www.src.org <http://www.src.org/> ) 919-941-9437 [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> SRC: 25 Years of Indispensable Collaboration -------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd <http://www.w3.org/TR/html4/loose.dtd> "> <html><head> <title>Test</title> <style type="text/css"> body { background:#fff; width:100%; } #rb-side { position:absolute; top:20px; left:20px; width:160px; border:1px solid red; } #rb-gnav { position:relative; float:left; clear:left; padding:20px 0 0; margin:20px 0; width:100%; background:yellow; } #rb-gnav ul { position:relative; float:left; clear:left; list-style-type:none; margin:0; padding:0; border-top:1px solid cyan; border-bottom:1px solid cyan; } #rb-gnav li { position:relative; clear:left; float:left; width:100%; background:#eee; border-bottom:1px solid #666; } #rb-gnav a { display:block; color:#000; width:150px; padding:5px; margin:0; } #rb-side #rb-gnav li a:hover { background:#999; color:#fff; } #rb-special { position:relative; float:left; clear:left; width:160px; height:100px; margin:0; padding:0; background:#666; } #rb-special p { color:#fff; padding:1em; } </style> </head> <body> <div id="rb-side"> <div id="rb-gnav"> <ul> <li><a href="">hot dogs</a></li> <li><a href="">french fries</a></li> </ul> </div> <div id="rb-special"><p>Your ad goes here.</p></div> </div> </body> </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
