Have fun chasing THIS one around in IE5! - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Have fun chasing THIS one around in IE5!

What in the world is happening here?!

MatthewHSE

3:50 pm on Apr 8, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

So I've been experiencing with floats today, and came up with the following code. Problem is, it jumps around really strangely in IE 5 every time the mouse gets over one of the links. The whole row of links just jumps lower and lower in the browser window. When it can't go any lower, it jumps back up to the top. Trying to catch these links reminds me of the monkey chasing the weasel . . . what might be wrong here? With a little tweaking and some javascript, this could probably make a good game for hand-eye coordination - but that wasn't exactly what I had in mind! ;)

It works fine in IE 5.5 and 6, Netscape 6.2 and up, and Mozilla browsers. Only IE 5 has the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dropdown Test</title>
<style type="text/css">
body {font-size: 100%; font-family: arial, verdana, sans-serif;}
a:link {
color: #000;
display: block;
float: left;
width: 200px;
border: 1px solid #000;
height: 20px;
}
a:visited {
color: #000;
display: block;
float: left;
width: 200px;
border: 1px solid #000;
height: 20px;
}
a:hover {
color: #000;
display: block;
float: left;
width: 200px;
border: 1px solid #000;
height: 20px;
background: #cee;
}
a:active {
color: #000;
display: block;
float: left;
width: 200px;
border: 1px solid #000;
height: 20px;
}
</style>
</head>
<body>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>
<a href="#">Link 8</a>
<a href="#">Link 9</a>
<a href="#">Link 10</a>
<a href="#">Link 11</a>
<a href="#">Link 12</a>
<a href="#">Link 13</a>
<a href="#">Link 14</a>
<a href="#">Link 15</a>
<a href="#">Link 16</a>
<a href="#">Link 17</a>
<a href="#">Link 18</a>
<a href="#">Link 19</a>
<a href="#">Link 20</a>
</body>
</html>

aeve

4:57 pm on Apr 8, 2004 (gmt 0)

10+ Year Member

Have you tried putting the float declaration on the

element rather than it's pseudo-classes?


<style type="text/css">
body {font: 100% arial, verdana, sans-serif; }
a {
color: #000;
display: block;
float: left;
width: 200px;
border: 1px solid #000;
height: 20px;
}
a:hover, a:active {
background: #cee;
}
</style>

Saves some code too. I usually only put changes into the pseudo-classes. ie5 must be "re-floating" the links on hover. Try right floating the hover for cross-browser fun.

Adam

TheDoctor

5:03 pm on Apr 8, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome to the club. When this first happened to my site and someone complained, I didn't believe them.

It's the combination of float and hover that does it. I've lost the place where I found out what the bug is, but I solve it by surrounding the floated items in an extra div. The rules for the div are:


{ width:75%; 
margin-left:auto; 
margin-right:auto;     
margin-top:0; 
margin-bottom:0; }

but I can't remember which of these fixes it.

Hope that's helpful. But at least you know you're not imagining things (to those who haven't seen this: you definitely think you're going mad when it occurs).

TheDoctor

5:05 pm on Apr 8, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

ie5 must be "re-floating" the links on hover.

Adam, you posted whilst I was composing my answer.

But it's that IE5 is inserting linebreaks - that much I remember.

MatthewHSE

12:15 pm on Apr 9, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Thanks guys. I wrapped the links in a floated div, which fixed the whole thing. (Don't know why your CSS rule didn't work in this scenario, TheDoctor. If it worked for you it should work for me - but then maybe the situations are a little different in some detail or another.)

At least I know I hadn't lost my sanity; I wondered for awhile! I mean, imagine the most bizarre, off-the-wall behavior you can think of for a browser. This bug beats it hands down . . .

TheDoctor

4:52 pm on Apr 9, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I thought I was losing my sanity when I first saw the bug as well...

Just for the record (so that it doesn't confuse any later readers) what I said (or meant to say) was that the CSS rule did work for me, but that I couldn't remember which bit was the crucial thing to do. From you post, Matthew, it seems that "div" was the key part ;)

MatthewHSE

5:14 pm on Apr 9, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

The div was part of the solution, but until I floated it, the links still jumped down once. Before I put them in a div, the links would hop down the entire page, in increments equal to their own height, every time you tried to hover over one of them. Wrapping them in a plain div caused them to jump only once. Floating the div was the only way to keep the links completely stationary.

But, get this. My code above has enough links that they're almost certain to wrap to several rows, resembling a table. Put that many links in a non-floated div, and they'll jump down once. But, if you remove enough links that you only have one row, a non-floated div does the trick, like you said.

Apparently it has something to do with the floated links being out of the flow of the document, so multiple rows need to be actually contained in another element.

Wouldn't our job be boring without all this? ;)