IE6 Block Link Hover Bug [Archive] - Dynamic Drive Forums

Aubri

05-31-2011, 05:33 PM

I've been crawling all over the internet trying to solve this issue, but none of the standard fixes help.
As usual, I have a navbar. The anchors act as block links in IE6, but the hover behavior only activates when I hover over the link text.

This is important because I'm using a DynamicDrive JS dropdown menu, so the user needs to be able to move the mouse from the text to the menu without losing :hover.

Yes, I'm using tables. It's because the brass here want a somewhat insane layout -- please just assume the tables are required and move on.

body, html
{
margin: 0;
padding: 0;
height: 100%;
}
body
{
background-color: #ffb;
}
table
{
border-collapse: collapse;
}
td
{
margin: 0;
padding: 0;
}
img
{
border: 0;
padding: 0;
}

#header
{
background: #ffb; /*To hide content scrolling up underneath the header*/
position: fixed;
left: 0;
top: 0;
padding: 0;
height: 200px;
width: 100%;
white-space: nowrap;
z-index: 20;
}

#navbar
{
width: 100%;
color: #fff;
text-align: center;
white-space: nowrap;
}
#navbar td
{
vertical-align: middle;
}
#navbar td a
{
height: 40px;
line-height: 40px;
display: block;
font-weight: bold;
text-decoration: none;
color: #fff;
background: #000 url(images/black2.png) repeat-x;
text-align: center;
vertical-align: middle;
}
#navbar a:hover
{
background: #d22 url(../images/red2.png) repeat-x !important;
}

<body>
<div id="header">
<div style="height: 160px;">

</div>
<div>
<table style="width: 100%; height: 40px;">
<tr>
<td style="width: 230px; height:100%;">

</td>
<td>
<table id="navbar">
<tr>
<td style="background: url(images/blackcap.png) no-repeat top right; width: 9px;
min-width: 9px;">

</td>

<td>
<a href="#" class="menuanchorclass" rel="anylinkmenu1">OPTION 1</a>
</td>
<td>
<a href="#" class="menuanchorclass" rel="anylinkmenu2">OPTION 2</a>
</td>
<td>
<a href="#" class="menuanchorclass" rel="anylinkmenu3">OPTION 3</a>
</td>
<td>
<a href="#" class="menuanchorclass" rel="anylinkmenu4">OPTION 4</a>
</td>
<td>
<a href="#" class="menuanchorclass" rel="anylinkmenu5">OPTION 5</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div> 
<div id="main">

</div>
</div>
</body>

You can see the full page here (http://test.railroadcontrols.com/test.aspx).

bluewalrus

05-31-2011, 05:44 PM

You'll need to use JS. IE6 only allows the hover CSS attribute on the a element. You want it on the TD element.

Aubri

05-31-2011, 06:35 PM

You'll need to use JS. IE6 only allows the hover CSS attribute on the a element. You want it on the TD element.

The A element should, in this case, be the same size as the TD. In fact, it is! --The A's background fills the TD correctly.

traq

05-31-2011, 07:40 PM

IE6 will still only apply it to the text. whatever:hover (http://peterned.home.xs4all.nl/csshover.html) is a decent javascript solution.

Aubri

06-02-2011, 01:56 PM

IE6 will still only apply it to the text. whatever:hover (http://peterned.home.xs4all.nl/csshover.html) is a decent javascript solution.

Thanks for the pointer, but I can't seem to get whatever:hover to work for me. Not sure what's wrong...

traq

06-02-2011, 03:20 PM

Here's another (I haven't tried this one personally, but the demo works fine)

http://www.visibilityinherit.com/code/ie6-hover-javascript.php

of course, we're nearing the end of people caring about supporting IE6 at all, so most solutions you find won't be well-maintained or supported.

Aubri

06-02-2011, 03:25 PM

Here's another (I haven't tried this one personally, but the demo works fine)

http://www.visibilityinherit.com/code/ie6-hover-javascript.php

of course, we're nearing the end of people caring about supporting IE6 at all, so most solutions you find won't be well-maintained or supported.

I'll try it. The whatever:hover example site worked fine, btw, it's just not functioning on my own site. (Argh!)

We've got a major customer that's still using IE6, so we have to support it until they get off their rears and upgrade.