Internet Explorer 10 Assigns Unusual Height to CSS Element

Question

I have put together a simple navigation link drop-down system while renovating my website. In Firefox 28, Chrome 35, and Opera 12 the links work splendidly. However, in Internet Explorer 10, if you attempt to get your mouse down to the 4th element on any drop-down menu, the menu closes. My guess is that IE is rendering the height of the containing element (div.nav ul ul) incorrectly. I have tried setting a height in pixels, which works in all browsers, even at 900PX, but stays exactly the same in IE.
Margins and padding also do nothing.

I'll just make this easy: Link Removed

But since that won't always be up, here is the code I think is relevant:

CSS:

div.nav 
{
    display: block;
    position: absolute;
    top: 76px; left: 393px;
    height: 47px; width:575px;
    background-color: transparent;
    z-index: 21;
    padding: 0px;
    margin: 0;
    margin-left: 15px;
    font-size: 14px;
    width: 900px;
}

div.nav ul ul 
{
    display: none;
    background-color: transparent;
}
div.nav ul li:hover > ul 
{
    display: block;
}

div.nav ul 
{
    padding: 0 0 0 0;
    list-style: none;
    position: relative;
    display: inline-block;
    width: 800px;
}
    div.nav ul:after 
    {
        content: ""; clear: both; display: block;
    }
    div.nav ul li 
    {
        float: left;
        top: -10px;
        background-color: transparent;
    }
        div.nav ul li:hover 
        {

        }
        div.nav ul li:hover a 
        {
            /*color: #fff;*/
        }

        div.nav ul li a 
        {
            display: block; padding: 0px 0px;
            color: #b4b4b4; text-decoration: none;
        }

    div.nav ul ul 
    {
        background: transparent; 
        border-radius: 0px; 
        padding: 0;
        position: absolute; 
        top: 100%;
        margin-bottom: 0px;
        margin-left: 3px;
        width: auto;
        height: auto;
    }
        div.nav ul ul li 
        {
            float: none; 
            position: relative;
            background-color: transparent;
        }
            div.nav ul ul li a 
            {
                padding-top: 10px;
                padding-bottom: 10px;
                padding-left: 30px;
                padding-right: 30px;
                margin-top: 2px;
                margin-left: 2px;
                background: #a9a9a9;
                color: #000;
                border-radius: 3px;
            }
                div.nav ul ul li a:hover 
                {
                    background: #8bbbdd;
                }

    div.nav ul ul ul 
    {
        background-color: transparent;
        position: absolute; 
        left: 100%;
        top: 4px;
        margin-left: 0px;
    }

HTML:

<div class="nav">
        <ul>
            <li><a href="/"><img class="nf" src="images/nav_home.png" onmouseover="this.src='images/nav_home_h.png'" onmouseout="this.src='images/nav_home.png'"></a></li>
            <li><a href="/"><img  class="n" src="images/nav_retropcs.png" onmouseover="this.src='images/nav_retropcs_h.png'" onmouseout="this.src='images/nav_retropcs.png'"></a>
                <ul>
                    <li><a href="#">My Collection</a></li>
                    <li><a href="#">Atari</a></li>
                    <li><a href="#">Commodore</a></li>
                    <li><a href="#">Texas Instruments</a></li>
                    <li><a href="#">Tandy Radio Shack</a></li>
                </ul>
            </li>
            <li><a href="/"><img class="n" src="images/nav_aboutme.png"  onmouseover="this.src='images/nav_aboutme_h.png'"  onmouseout="this.src='images/nav_aboutme.png'"></a>
                <ul>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">My Software</a></li>
                    <li><a href="#">Biography</a></li>
                </ul>
            </li>
            <li><a href="/"><img   class="n" src="images/nav_help.png"     onmouseover="this.src='images/nav_help_h.png'"     onmouseout="this.src='images/nav_help.png'"></a>
                <ul>
                    <li><a href="#">Games</a></li>
                    <li><a href="#">Utilities</a></li>
                    <li><a href="#">Retro</a></li>
                </ul>
            </li>
            <li><a href="/"><img class="n" src="images/nav_software.png" onmouseover="this.src='images/nav_software_h.png'" onmouseout="this.src='images/nav_software.png'"></a>
                <ul>
                    <li><a href="#">Report A Problem</a></li>
                    <li><a href="#">Contact Me</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </li>
        </ul>
    </div>

Please let me know if you have trouble getting to the site or source code.

I appreciate any help I can get.

If it helps, when I set the background on the list element (div.nav ul ul) to black instead of transparent, it works fine in all browsers. If this is just a bug, does anyone know a workaround? — Bit Fracture, May 05 '14 at 13:28
Hmm, yes, now we may be looking at a duplicate. http://stackoverflow.com/questions/3997065/ie-css-bug-background-color-transparent-behaves-differently-to-background-colo — Bit Fracture, May 05 '14 at 13:29

score 0 · Accepted Answer · edited May 23 '17 at 12:20

yAlright, I've got the answer, finally. Internet Explorer, (as described here: IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour) ), treats elements with transparent backgrounds differently than those with visible backgrounds.

The fix: Set the background to a transparent image, preferably a 1x1 pixel transparent GIF. Works like a charm.

Internet Explorer 10 Assigns Unusual Height to CSS Element

1 Answers1