Getting a CSS Horizontal Menu to work in IE (7)

Here is the problem. I have a simple CSS Horizontal Menu that I wanted to put on a page. The menu looks fine in Firefox. But doesn't even appear when viewed in IE. Any ideas? The code is below. Thanks.

CSS

/* CSS Document */
<style type="text/css">
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#banner {
padding: 0px;


margin-bottom: ;
background-color: #D0CDE2;
background-image: url(images/CRI_Images_r1_c2.jpg);
background-repeat: repeat-x;
height: 126px;
}

#content {
padding: 5px;
background-color: #D0CDE2;
height: 374px;
}

#footer {
clear: both;
padding: 5px;
margin-top: ;

background-color: rgb(213, 219, 225);
}

<!--
/* BEGIN style7 */
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}

#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}

/* END style7 */
-->
</style>


HTML Code:

<div id="navcontainer" align="center">
<ul id="navlist">
<li><a href="overview.html" title="Overview">Overview</a></li>
<li><a href="staff.html" title="Staff">Staff</a></li>
<li><a href="experience.html" title="Experience">Experience</a></li>
<li><a href="facilities.html" title="Facilities">Facilities</a></li>
<li><a href="comtact.html" title="Contact">Contact</a></li>
<li><a href="newsletters.html" title="Newsletters">Newsletters</a></li>
<li><a href="home.html" title="Home">Home</a></li>
</ul>
</div>

 

I'd have to recreate that to see what's going on, but I do know that IE has some issue with inline lists (dunno what it is) and most people float the li's instead of (or along with) display inline.


#navlist li
{
list-style: none;
width: something for the float;
float: left;
margin: 0;
border-top: 1px solid gray;
display: inline;
}

 

Thank you for replying. I tried your fix and it did not work. If you have any other suggestions please let me know thanks.

 

You have a LOT of hacks and other code that doesn't need to be there. Why don't you put up a link to the page so I can take a look at it and tell you what to rip out and what to replace it with? (Note: I'll be gone all weekend, so I won't be able to do anything until Monday or Tuesday at the earliest.)

 

Yeah, that width hack up top means IE 6 is in quirks mode, and should only be needed if you still give a shit about IE 5.x (which there's no good reason too anymore) - other issues include declaring a border-top on a inline element which often doesn't work right, declaring list-style on the LI instead of the UL...

Yeah, I'm with Dan - I'd need to see more to even think about what's wrong.

 

Here is the link below. Thanks.

http://wichita.kumc.edu/NewCRI/index1.html

 

Ok, what's troubling here is I cannot figure out what it's ACTUALLY supposed to look like - as Firefox, IE, Opera and Safari are all giving me different appearances - not good.

Some of the problem is invalid CSS - for example this:

<style type="text/css"> and </style>

do NOT go in your external .css file. Nor do HTML style comments do anything but result in invalid markup.

I just 'cleaned it up' (by dropping it into one of my standard templates)

http://battletech.hopto.org/for_others/JLG2/template.html

That's the fixed width version. A semi-fluid using min/max width is at:

http://battletech.hopto.org/for_others/JLG2/template2.html

Which uses expression to get it working in IE, and has a fallback should javascript be disabled. The only difference between the two versions is the stylesheet they call.

The directory:
http://battletech.hopto.org/for_others/JLG2

is unlocked so you can grab the bits and pieces.

Validates XHTML 1.0 strict, tested working in IE 5.x, 6 & 7, FF, Opera and Safari. You could probably reduce the total code slightly if you are willing to take an axe to IE 5.x support.

The only thing that should REALLY need an explanation is the header - I used a fairly common 'image replacement' technique there. Images off, you'll still see ACTUAL text, and with CSS on that text is formatted. The image is dumped into the empty span, and then positioned over the text to hide it.

Hope this helps.

 

Thank you very much for you help.

 

Hi there,
I have JUST published the source code for my own menu that won this battle with IE7 with full annotation of what does what where.

I know I am replying an OLD Nov 2007 but this page comes close on search results so may be very useful to someone. web: inform.symsysit.com
and go to 'css horizontal hover menu, works in IE7 with no java or hacks'

I know this post is about a bog standard menu without submenus - but I am sure you would rather have a pure css menu with a bit more to it than that

 

cute, but problematic given the 20-50% that still use IE6 (depending on your sites target audience)... when all you need to do to make it work in IE6/earlier is toss in a behavior file, and not use child selectors.

Though it also has the issue of using display:none meaning it's not fully functional in some screen readers (though your fallback links much like IE6 can be considered close enough).

The 'real' issues IMHO are the extra div for nothing and the reliance on absolute positioning. The first of those is just bloat since you aren't doing anything you can't apply directly to the UL - the latter just being bad practice (though since you are in a fixed width layout, that parts forgiveable)