Weird IE6 CSS link hover bug - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Weird IE6 CSS link hover bug

Lonely Rolling Star

7:23 pm on Jul 4, 2007 (gmt 0)

10+ Year Member

I've encountered a CSS bug in IE6 (what's new) that is really weird. When you hover over a link the whole section jumps up. If anyone is able to provide more infromation or direct me to a site that explains the bug in detail, I would really appreciated it.

I have stripped the HTML down to just what is necessary to produce the bug.

If you remove the background color on the div, the bug does not occur. huh?

The a:hover rule doesn't really DO anything either: I'm setting the border-color and there isn't even a border. However, if you set text-decoration instead, the bug does not occur.

Thanks for your help!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IEJump Test</title>
<style type="text/css">
.div1
{
 float: left;
}
.div2
{
/*float: left; if you float this div, the effect disappears. */
 padding-top: 20px;
 background-color: #DAE8EF;
 clear: both;
}
.inner-div
{
 height: 100px;
}
a:hover
{
border-color: red; /* this can be many things: height, border, line-height... but not text-decoration */
}
</style>
</head><body>
<div class="div1">I'm at the top.</div>
<div class="div2">
<div class="inner-div">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
</div></body>
</html>

JAB Creations

4:41 pm on Jul 6, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

According to WAI or Section 508 (not sure which but I'm pretty sure it's WAI) anchors can't be directly next to each other. I've since put concurrent anchors in floating divs.

Therefor I think this should serve you a little better as the code is a little cleaner and will not produce the pop effect in IE (tested with IE6).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IEJump Test</title>
<style type="text/css">
#head {
background-color: #DAE8EF;
height: 40px;
padding-top: 20px;
}
#head div {
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div id="head">
<div><a href="#">Link1</a></div>
<div><a href="#">Link2</a></div>
<div><a href="#">Link3</a></div>
</div>
</body>
</html>

If you need any further help please let me know and have fun. :)

- John

tourmapia

11:16 pm on Jul 12, 2007 (gmt 0)

10+ Year Member

I have the same problem...
When I print <div class="sidebar-menu">
bla blah</div>

it disappears, when i refresh it, i can see it. After some time again jumps out..

CSS is below:

.sidebar-menu { position:relative; width:155px; padding:0px 0px 3px 0px;
margin:0px 0px 8px 0px;background:url("/images/menu_bg.jpg");
background-position:top left; background-repeat: repeat-x;
border:1px solid #6cc51a; }

.sidebar-menu h2 {padding:1px 0px 5px 2px; margin:0px; font-weight:bold; font-size:12px}

.sidebar-menu ul li { display:block; }
.sidebar-menu ul { padding:0px; margin:4px; padding:3px; }
.sidebar-menu ul li { color:#6cc51a;font-weight:normal;font-size:12px;padding:0px;
background:url("/images/menu_bullet.gif") no-repeat;background-position:0 .25em;
list-style-type: none;margin:2px 0px 0px 0px; border-bottom:1px dotted #ccc; padding:0px 0px 3px 12px; }

.sidebar-menu a {color:#579e11; text-decoration:none;}
.sidebar-menu a:hover {color:#579e11}