IE and CSS Menu

Can someone please help me with this basic CSS menu I built? It works fine in all other browsers except IE of course.

The menu displays horizontally in the other browsers. But it displays vertically in all versions of IE.

HTML:

<div id=“sub-menu”>
<ul>
<li><a href=“index.cfm?fuseaction=agent”>Become an Agent</a></li>
<li><a href=“index.cfm?fuseaction=faq”>FAQ</a></li>
<li><a href=“index.cfm?fuseaction=rap”>Earn Extra $</a></li>
<li><a href=“index.cfm?fuseaction=educator”>Real Estate Educators</a></li>
<li><a href=“index.cfm?fuseaction=jobdescription”>Agent Job Description</a></li>
</ul>
<p class=“clear” />
</div>

CSS:

p.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
}

#sub-menu {
position: relative;
margin-top: 10px;
}

#sub-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#sub-menu li {
line-height: 30px;
float: left;
}

#sub-menu a {
line-height: 30px;
}

#sub-menu a {
display: block;
height: 30px;
background: url(…/images/web-sub-menu-sprite.png) repeat-x top left;
color: #fff;
font-size: 1em;
font-family: Trebuchet MS, Arial, sans-serif;
font-weight: bold;
padding: 0 10px 0 10px;
text-decoration: none;
}

#sub-menu a:hover {
background: url(…/images/web-sub-menu-sprite.png) repeat-x bottom left;
color: #006bb6;
}

Hey, just took a look at your stylesheet again and spotted the block display in your anchor, but I can see EricWatson beat me to the punch.

Put together a test page for you, you could try putting your content in here and see if you still run into the same problems on your rogue pages:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Test Page</title>

<style>
p.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
}

#sub-menu {
position: relative;
margin-top: 10px;
}

#sub-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#sub-menu li {
line-height: 30px;
float:left;
width:auto;
clear:none;
}

#sub-menu a {
line-height: 30px;
}

#sub-menu a {
display: inline-block;
height: 30px;
background: url(…/images/web-sub-menu-sprite.png) repeat-x top left;
color: #fff;
font-size: 1em;
font-family: Trebuchet MS, Arial, sans-serif;
font-weight: bold;
padding: 0 10px 0 10px;
text-decoration: none;
}

#sub-menu a:hover {
background: url(…/images/web-sub-menu-sprite.png) repeat-x bottom left;
color: #006bb6;
}
</style>

</head>

<body style=“background:#000000;”>

<div id=“sub-menu”>
<ul>
<li><a href=“index.cfm?fuseaction=agent”>Become an Agent</a></li>
<li><a href=“index.cfm?fuseaction=faq”>FAQ</a></li>
<li><a href=“index.cfm?fuseaction=rap”>Earn Extra $</a></li>
<li><a href=“index.cfm?fuseaction=educator”>Real Estate Educators</a></li>
<li><a href=“index.cfm?fuseaction=jobdescription”>Agent Job Description</a></li>
</ul>
<p class=“clear” />
</div>

</body>
</html>

Unfortunately it didn’t work again. Here’s the CSS again. I am baffled at what it could be.

CSS

p.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
}

#sub-menu {
position: relative;
margin-top: 10px;
}

#sub-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#sub-menu li {
line-height: 30px;
float: left;
clear: none;
}

#sub-menu a {
line-height: 30px;
}

#sub-menu a {
display: block;
height: 30px;
background: url(…/images/web-sub-menu-sprite.png) repeat-x top left;
color: #fff;
font-size: 1em;
font-family: Trebuchet MS, Arial, sans-serif;
font-weight: bold;
padding: 0 10px 0 10px;
text-decoration: none;
}

#sub-menu a:hover {
background: url(…/images/web-sub-menu-sprite.png) repeat-x bottom left;
color: #006bb6;
}

It was as simple as adding clear:none to your LI rule, like so:
#sub-menu li {
line-height: 30px;
float: left;
clear:none;
}

This should do the trick, and you don’t have to set a width on your UL…

Thanks for the test page. It worked in when I used it. I ended up looking into my header file and found a piece of code a former developer must have added strictly for that page. It was replacing the <head> section including the associated style sheet controlling the page. Everything working fine now. I appreciate all the help from you both!

Thanks for the reply but it didn’t work even when I added a width of 100% to the <ul> in the CSS. I am attaching two screenshots to show visually what is happening.

Working Sample

IE Not Working Sample

Thanks again.

Both of you … Thanks.

It looks like the anchor float has fixed the IE problem on all but one page strangely enough. They’re all using the same menu structure and CSS. Must be something on the page itself.

It’s prob due to the display block on your anchor. Float the anchor left instead.

This is because if you do not set a width on your UL, the LI items will wrap despite the float:left . You could, for example, set the width to 100%.