PDA

Click to See Complete Forum and Search --> : IE7 Float and Hover Bug

FiZiX
02-27-2008, 03:54 PM
This is a new one for me but hopefully somebody else has run in to this. I did some searching and couldn't find any solutions:

I have a page with a menu that's floated left in it's own div and some other divs to the left of the menu. In IE7, the elements in the menu will only display their hover color sporadically when hovered over. However, when there isn't anything to the left of the elements in the menu, the hover property works fine. Here's an example page I made to recreate the bug:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<STYLE>
#accordion {
FLOAT: right;
MARGIN-LEFT: 10px;
OVERFLOW: hidden;
WIDTH: 210px
}
.accordion_toggle {
padding: 0;
MARGIN: 0;
WIDTH: 180px;
LINE-HEIGHT: 30px;
border: 1px solid black;
}
.accordion_toggle:hover {
BACKGROUND: red;
COLOR: #000000
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<DIV id="accordion">
<H1 class="accordion_toggle accordion_toggle_active"> 1</H1>
<H1 class="accordion_toggle">2</H1>
<H1 class="accordion_toggle">3</H1>
<H1 class="accordion_toggle">4</H1>
<H1 class="accordion_toggle">5</H1>
<H1 class="accordion_toggle">6</H1>
<H1 class="accordion_toggle">7</H1>
<H1 class="accordion_toggle">8</H1>
</DIV>
<DIV style="height: 160px; background-color: blue;"></DIV>
</DIV>
</BODY>
</HTML>

Notice that 6, 7, and 8 work fine.

Can any of you think of any hacks or workarounds to squash this bug? Thanks!
WebJoel
02-27-2008, 04:52 PM
No bug: IE does not handle the psuedo-class ":hover" on anything except an anchor. I view this in Fx and IE7 and am not seeing the problem you describe..

edit: oh yeah... I saw it.

Adding this:

.accordion_toggle h1 {display:block;}

causes the h1 tags to be 'shrink wrapped' and makes the entire area (width & height) be 'hot' and respond to ":hover"
FiZiX
02-28-2008, 09:36 AM
No bug: IE does not handle the psuedo-class ":hover" on anything except an anchor. I view this in Fx and IE7 and am not seeing the problem you describe..

Not true; they changed that in IE7

edit: oh yeah... I saw it.

Adding this:

.accordion_toggle h1 {display:block;}

causes the h1 tags to be 'shrink wrapped' and makes the entire area (width & height) be 'hot' and respond to ":hover"

Thanks but that didn't seem to help, I still have the same symptom.
FiZiX
02-28-2008, 09:50 AM
I've now validated my HTML and made changes. However, I still have the problem. Here's the new code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
#accordion {
float : right;
margin-left : 10px;
overflow : hidden;
width : 210px;
}
.accordion_toggle {
padding : 0;
margin : 0;
width : 180px;
line-height : 30px;
border : 1px solid black;
}
.accordion_toggle h1 {
display : block;
}
.accordion_toggle:hover {
background : red;
color : #000000;
}
</style>
</head>
<body>
<div>
<div id="accordion">
<h1 class="accordion_toggle">1</h1>
<h1 class="accordion_toggle">2</h1>
<h1 class="accordion_toggle">3</h1>
<h1 class="accordion_toggle">4</h1>
<h1 class="accordion_toggle">5</h1>
<h1 class="accordion_toggle">6</h1>
<h1 class="accordion_toggle">7</h1>
<h1 class="accordion_toggle">8</h1>
</div>
<div style="height: 160px; background-color: blue;"></div>
</div>
</body>
</html>
matt.ritter
02-28-2008, 10:37 AM
It is related to the float.

Which brings up the question of how you want this displayed. In the Firefox the blue div carries through under your menu while in ie7 the blue stops at the menu.

Also is there any reason why you are using h1 tags in the menu it is generally a good idea to use just one h1 tag on the page for SEO.
FiZiX
02-28-2008, 11:54 AM
It is related to the float.

Which brings up the question of how you want this displayed. In the Firefox the blue div carries through under your menu while in ie7 the blue stops at the menu.

No, I don't want it to be under the menu and it isn't in my actual page. I solved that issue by putting an "overflow: hidden" property on the blue div.

Also is there any reason why you are using h1 tags in the menu it is generally a good idea to use just one h1 tag on the page for SEO.

The only reason I'm using h1 tags is that the accordion script that normally opens the menu is made to use them. I have tried changing all the h1s to divs but it doesn't make a difference. I've also noticed that this problem does not occur if the div containing the menu and the blue div is taken away but I need that div for formatting on my real page.