Sent by Shelman, Mark / SRC on 16 August 2007 17:05
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-REMOVED] [EMAIL-REMOVED]>
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-REMOVED]]
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/
