Home/ Questions/Q 6028637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T04:46:10+00:00

I have to modify a HTML page because the menu doesn’t work with IE6/IE7/IE8.

  • 0

I have to modify a HTML page because the menu doesn’t work with IE6/IE7/IE8.

HTML code :

<div id="menu">
    <table>
    <tr>
        <td><a href="menu1.php">Menu 1</a></td>

        <td>Menu 2
                <ul>
                    <li><a href="submenu1-1.php">Sub-menu 1</a></li>
                    <li><a href="submenu1-2.php">Sub-menu 2</a></li>
                    <li><a href="submenu1-3.php">Sub-menu 3</a></li>
                </ul>
        </td>

        <td><a href="menu3.php">Menu 3</a></td>

        <td>Menu 4
            <ul>
                    <li><a href="submenu3-1.php">Sub-menu 1</a></li>
                    <li><a href="submenu3-2.php">Sub-menu 2</a></li>
                    <li><a href="submenu3-3.php">Sub-menu 3</a></li>
            </ul>
        </td>

        <td><a href="menu5.php">Menu 5</a></td>

        <td>Menu 6
                <ul>
                    <li><a href="submenu5-1.php">Sub-menu 1</a></li>
                    <li><a href="submenu5-2.php">Sub-menu 2</a></li>
                    <li><a href="submenu5-3.php">Sub-menu 3</a></li>
                </ul>
        </td>

        <td><a href="disconnect.php">Menu 7</a></td>

    </tr>
    </table>
</div>

CSS code :

#menu a, #menu li, #menu td{
    color: black;
    text-decoration: none;
}

#menu a:hover{
    color: black;
}

#menu ul {
    list-style-type: square; 
    text-align:left;
}

#menu table{
    width: 100%;
    height:40px;
}

#menu td{
    border-right: 2px solid black; 
    padding-right:5px;
}

#menu td ul{
    position:absolute;
    left: -999em;
    margin-top:0px;
    border: 2px outset black;
    background: white;
}

#menu td:hover ul{

    left: auto;
}

The syntax with the ‘td’ and ‘ul’ seems a bit strange to me. Is there any tips to bring back the compatibility with the old versions of Microsoft browsers ?

Thank you !

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    #menu td:hover ul will work in IE7+ if your page is in Standards Mode.

    To make your page use Standards Mode, add a proper doctype as the very first line, such as:

    <!DOCTYPE html>

    Unfortunately, this won’t fix IE6 because that version only supports :hover on a elements.

    To fix IE6 (and the other versions of IE if you can’t add a doctype and your page must remain in Quirks Mode), you should use this JavaScript fix:

    http://peterned.home.xs4all.nl/csshover.html

    Most modern browsers support the
    :hover selector for any html element.
    This is cool, because it enables you
    to, for instance, apply a mouseover
    effect to table rows using only
    CSS. IE however, has an erratic
    support for :hover at best, depending
    on the particular version your visitor
    is using.

    Whatever:hover is a small script that
    automatically patches :hover, :active
    and :focus for IE6, IE7 and IE8
    quirks, letting you use them like you
    would in any other browser.

    • 0