homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

IE6 bug: hop on hover -- seen this one?
text with background-color on :hover pseudo-element hops on hover

10+ Year Member

Msg#: 4482 posted 3:01 am on Sep 6, 2004 (gmt 0)

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">
<title>IE6 hop-on-hover bug</title>
body { padding-top:30px; }
a:hover { background-color:#f9c0c0; }
div.floatedbox {
border:1px solid #666666; /* just for visibility */
<div class="floatedbox">
div is floated left, width 100%
<div><a href="">if in high position, hop on hover to low pos</a></div>
<a href="">if in low position, hop on hover to high pos</a>
One workaround is to use a width of less than 100% for the floated box.</p>
Displacement is the padding-top value of body.</p>



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

Msg#: 4482 posted 5:50 pm on Sep 6, 2004 (gmt 0)

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 */


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


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved