Sent by Ingo Chao on 16 August 2007 18:06
Shelman, Mark / SRC wrote:
> 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. ...
Sorry, I cannot reproduce the bug on src.org
>
> 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.
>
> ...
>
I think it is related to the floating li of 100% width.
#rb-gnav li {
margin-right: -3px;
}
seems to fix it here.
Below another reduction. The padding is copied and pasted to the bottom
of the block.
regards,
Ingo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
ul {
background:yellow;
padding: 100px 0 0 0;
margin: 0;
width: 100%;
}
li {
float:left;
width:100%;
/*margin-right: -3px;*/ /* fix */
}
a:hover {
background: 0 0;
}
</style>
</head>
<body>
<ul><li><a href="#">hot dogs</a></li></ul>
<p>Your ad goes here.</p>
</body>
</html>
--
http://www.satzansatz.de/css.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/
