IE6 Block Link Hover Bug

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

Code:

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;
}

Code:

<body>
    <div id="header">
        <div style="height: 160px;">
            <!-- Irrelevant images and such go here. -->
        </div>
        <div>
            <table style="width: 100%; height: 40px;">
                <tr>
                    <td style="width: 230px; height:100%;">
                        <!-- Some more branding stuff goes here. -->
                    </td>
                    <td>
                        <table id="navbar">
                            <tr>
                                <td style="background: url(images/blackcap.png) no-repeat top right; width: 9px;
                                    min-width: 9px;">
                                    <!-- This is just here to pretty up the navbar. -->
                                </td>
                                <!-- These anchors are the issue. Menuanchorclass makes the dropdowns work. -->
                                <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> <!-- End Header -->
    <div id="main">
        <!-- Page content goes here. -->
    </div>
    </div>
</body>

You can see the full page here.

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

Originally Posted by bluewalrus

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 is a decent javascript solution.

**Aubri** · 06-02-2011, 01:56 PM

Originally Posted by traq

IE6 will still only apply it to the text. whatever:hover 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/cod...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

Originally Posted by traq

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

http://www.visibilityinherit.com/cod...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.

Thread: IE6 Block Link Hover Bug

Thread Tools

Search Thread

IE6 Block Link Hover Bug

Bookmarks

Bookmarks

Posting Permissions