Previous Message
Next Message

IE 1px jump on a:hover

Sent by Roger Johansson on 25 August 2004 19:07


Hi.
I've run into an odd IE/Win problem that I can't find any mention of. 
It _may_ be related to the IE/Win Guillotine Bug [1] and/or The IE 
Three Pixel Text-Jog [2].
I've made a minimal test case, which consists of two divs, both floated 
left. The leftmost div contains a single link, which is given a 
background colour on hover. The problem is that when the link is 
hovered over, the second div jumps one pixel to the left. This does not 
happen if the link's background doesn't change on hover.
Another way to make the bug go away is to change the left margin of the 
second div. I've seen the problem occur when it has a margin of 1%. 
Changing it to 2% or a pixel value kills the bug. Ok, but what if I 
_want_ a 1% left margin? ;)
Anyway, I just want to check if this is documented somewhere, perhaps 
with a nice description of possible workarounds. HTML and CSS follows, 
and I've uploaded a test case to my site [3].

HTML:

<div id="nav">
	<a href="link">The link</a>
</div>
<div id="main">
	The text. This will jump one pixel to the left when the link is 
hovered over.
</div>

CSS:

#nav {
float:left;
width:20%;
}
#nav a:hover {
background-color:#ff0; /* Removing this kills the bug */
}
#main {
float:left;
width:40%;
margin-left:2%; /* changing this kills the bug */
}

[1] < http://www.positioniseverything.net/explorer/guillotine.html >
[2] < http://www.positioniseverything.net/explorer/threepxtest.html >
[3] < http://www.456bereastreet.com/lab/ie1pxjump/ >

/Roger

--
http://www.456bereastreet.com/

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: