Is this a "Clear:" issue?

DrewDizzle · 05-26-2009, 02:40 PM

Below is a screenshot of a menu I'm working on... this only happens in recent IE versions with compatibility view OFF.

Here's the code for the menu - it works in Safari, Opera, FF, and some versions of IE9. WTF am I missing?!

Code:

<div id="content">
    <div id="menu">
        <ul>
        <li><a class="current" href="index.html"><em><b>HOME</b></em></a></li>
        <li><a href="about.html"><em><b>ABOUT US</b></em></a></li>
        <li><a href="employers.html"><em><b>EMPLOYERS</b></em></a></li>
        <li><a href="contact.html"><em><b>CONTACT</b></em></a></li>
        </ul>
     </div>

Code:

#menu { padding:9px 0 28px 0; background:url(../images/line-hor.gif) left bottom repeat-x; width:100%; overflow:hidden; margin-bottom:25px;}
#menu ul li { display:inline;}
#menu ul li a { display:block; float:left; background:url(../images/menu-bg.gif) left top repeat-x; margin-right:8px; font-family:"trebuchet ms"; color:#343434; text-decoration:none; text-transform:uppercase;}
#menu ul li a em { display:block; background:url(../images/menu-left.gif) no-repeat left top;}
#menu ul li a b { display:block; background:url(../images/menu-right.gif) no-repeat right top; width:82px; text-align:center; font-style:normal; font-size:.91em; padding:1px 0 3px 0; cursor:pointer;}
#menu ul li a.last { margin-right:0;}
#menu ul li a:hover { color:#006699;}
#menu ul li a.current { color:#006699;}

abduraooft · 05-26-2009, 02:43 PM

Can we have a link to your page?

DrewDizzle · 05-26-2009, 03:46 PM

http://www.drewdizzle.com/mwo/site/

DrewDizzle · 05-27-2009, 02:18 AM

Any ideas?

_Aerospace_Eng_ · 05-27-2009, 05:45 AM

Seriously IE9? No such thing yet. IE8 is the latest final version. Try setting a width on the ul in pixels rather than percent. Make sure you have set margin and padding to 0 on the ul.

SB65 · 05-27-2009, 06:35 PM

Hi Drewdizzle

I think the problem is caused by this css

Code:

#content ul li {margin-left: 15px; list-style-image: url(../images/marker.gif);}

also being applied to your #menu li. Try adding:

Code:

#content #menu ul li{margin-left:0px}

to your css. It needs to be this specific to take precedence over the other css entry I think. Why does this only cause a problem in IE8 when it works OK in IE6? I don't know.....