View Full Version : Is this a "Clear:" issue?

May 26th, 2009, 03: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?!

<div id="content">
<div id="menu">
<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>

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

May 26th, 2009, 03:43 PM
Can we have a link to your page?

May 26th, 2009, 04:46 PM

May 27th, 2009, 03:18 AM
Any ideas?

May 27th, 2009, 06: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.

May 27th, 2009, 07:35 PM
Hi Drewdizzle

I think the problem is caused by this css

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

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

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