Question

I’ve got a popup menu div that is shown and hidden with the following jQuery:

$('#' + mnu).show('slide', { direction: 'down' }, 300);

In IE9 it displays correctly:

…but in IE7, it shows some strange white marks:

Has anybody seen anything like this before? How can I get IE7 to display properly?

Here is the HTML if it helps:

<div id="mainMenu" style="display: block; ">
    <h2>Main menu</h2><img class="closeBtn" src="images/closeBtn.png">
    <nav id="mainNav" type="list">
        <li>
            <h3 tabindex="1">Category 1</h3>
            <ul style="display: block;">
                <li><a href="javascript:slides.goto(1);" tabindex="1">Item 1</a></li>
                <li><a href="javascript:slides.goto(2);" tabindex="1">Item 2</a></li>
                <li><a href="javascript:slides.goto(3);" tabindex="1">Item 3</a></li>
            </ul>
        </li>
        <li>
            <h3 tabindex="1">Category 2</h3>
            <ul style="display: none;">
                <li><a href="one.html" tabindex="1">Item 1</a></li>
                <li><a href="two.html" tabindex="1">Item 2</a></li>
            </ul>
        </li>
    </nav>
</div>

CSS:

#mainMenu {
    display:none;
    background-color:#fff;
    position:absolute;
    left:0px;
    bottom:40px;
    margin:0;
    padding:0;
    -moz-box-shadow: 0px 0px 10px #959595;
    -webkit-box-shadow: 0px 0px 10px #959595;
    box-shadow: 0px 0px 10px #959595;
    width:350px;
    border: 2px solid #00add0;
    z-index:101;    
    font-size:15px;
}
#mainMenu h2 {
    display:block;
    background-color:#00add0;
    margin:0;
    padding:0 3px;
    font-family: 'DIN Next W01 Regular', Helvetica, Arial, sans-serif;
    font-size: 20px;
    text-transform:uppercase;
    font-weight:normal;
    color:#fff;
    vertical-align:middle;
}

#mainMenu nav li h3 {
    font-weight:normal;
    font-size:15px;
    padding: 0 0 0 20px;
    margin:0;
}

#mainMenu nav li {
    display: block;
    list-style:none;
    background-color:#333;
    color:#fff;
    margin:0;
    padding:3px 0;
    cursor:pointer;
    border-top: 1px solid #444444;
    border-bottom: 1px solid #242424;
    background-image:url('../images/twistArrowRight.gif');
    background-repeat:no-repeat;
    background-position:5px 5px;
}

#mainMenu nav li ul {
    padding:3px 0 3px 20px;
    margin:0;
}

#mainMenu nav li ul li {
    display: block;
    list-style:decimal;
    margin:0 0 0 -20px;
    padding:3px 0 3px 0px;
    cursor:pointer;
    border-top:0;
    border-bottom:0;
    background-image:none;

    font-size:12px;
    text-decoration:underline;
}

#mainMenu nav ul li a {
    display:block;
    color:#fff;
    font-size:12px;
    padding:0 0 0 40px;
}

#mainMenu nav ul li a:hover, #mainMenu nav ul li a:focus {
    background-color:#444;
}

Many thanks

Answer 1

IE7 does not support HTML5, so nav is not known. I think IE7 wraps the children li elements in an ul and you are seeing the bullets.

But the li elements should not be direct children of nav at all. They have to be in a list, as far sa I know.