Welcome to WebmasterWorld Guest from 54.205.74.11

Forum Moderators: not2easy

IE6 bug: hop on hover -- seen this one?

text with background-color on :hover pseudo-element hops on hover

   
3:01 am on Sep 6, 2004 (gmt 0)

10+ Year Member



I was adding hover background-colors to links, and noticed a problem in IE6.

IE5/Mac, Safari, and Mozilla don't exhibit the problem.
This is probably already known (maybe a side effect of the IE float problems?). The only similar bug reports I could find were for nested elements, so I thought I'd ask.

I also found a related situation which causes fully-updated IE6 to crash in an easily repeatable fashion. I'm still working on a simple demo for that one. (The C++ Runtime error is "R6025: pure virtual function call").


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>IE6 hop-on-hover bug</title>
<style>
body { padding-top:30px; }
a:hover { background-color:#f9c0c0; }
div.floatedbox {
float:left;
width:100%;
border:1px solid #666666; /* just for visibility */
}
</style>
</head>
<body>
<div class="floatedbox">
div is floated left, width 100%
</div>
<div><a href="">if in high position, hop on hover to low pos</a></div>
<p></p>
<a href="">if in low position, hop on hover to high pos</a>
<p>
One workaround is to use a width of less than 100% for the floated box.</p>
<p>
Displacement is the padding-top value of body.</p>
</body>
</html>
5:50 pm on Sep 6, 2004 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi quesera - Welcome to the Forums

I'm pretty sure this is a variation of the Guillotine Bug [positioniseverything.net]

On the surface it appears not, but on reading the required elements to trigger this bug you have them all there.


The main ingredients for a "properly working" Guillotine are:

1. A container element
2. A float element inside the container that is not "cleared"
3. Links inside the container in non-floated content after the float
4. a:hover style rules for those links that change certain properties
5. Internet Explorer, obviously

(no.1 is the <body> element)

The problem is that the links with the hover effect (yes background color is a trigger) when they are hovered over they are "messing" with IE's auto enclosing behaviour, toggling it on and off so the body is getting confused as to whether that floated div is cleared or not..

It's too difficult to understand IE or to even explain, lol.. but the usual IE bugfix works.

the content that follows a float needs to be given layout. (See this thread [webmasterworld.com] for more details on "hasLayout").

The easiest way to do this is the wrap the the content following the float in a wrapper div and then hack in a dimension for IE only. (zoom can be used outwith a hack if you don't care about IE5 support)

/* hide from mac \*/
* html #wrapper {clear: both; height: 1%;}
/* end hide */

or

#wrapper {clear: both; zoom: 1;}

Suzy

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month