Just when I think I've got my CSS nav menu correct for all browsers, IE (in this case IE 8) decides that it won't go along with the program. Is there any place on the internet I could find out the subtle "tricks of the trade" to get ALL Internet Explorer versions to display the content like it should?

This website: http://www.olympiahighlanderspipesanddrums.org looks fine in Firefox and Chrome but when I bring it up in IE the nav bar reverts to its un-ordered list configuration. It displayed in the HTML Editor Quick View and I noticed that aside from being slightly off center it was presentable.

Can anyone please point me to a web site or book that can help me correct this?

All I can think to try at the moment ... Let us know how it goes ...
http://code.google.com/p/html5shiv/

Looks fine for me in IE

Thanks Gunsmoke. I'll look into this. I'm really trying to stay strictly CSS if I can.

Greg

Hey Eric;
Yeah, that's the problem. I tested it in HTML Editor and it looked fine, and that's why it's out there. Darn thing is, somehow it doesn't look good at all in IE 8 now. I thought at first I forgot an external file but that idea went out the window when I looked at it with FireFox and Chrome. Now comes the fun part ... stepping thru the lines of code trying to locate the cause, how much fun is that?

Greg

IE8 is over 4 years old, and there are two newer versions having been launched after IE8 It is estimated that only about 7% of internet users still have it loaded. Someone posted a map someplace here to show that.
I haven't checked your code (am too busy these days), but some day we need to draw the line and stop supporting old browsers. Just my tuppence worth...

Personnally I have never understood why these (nameless ) companies don't all agree on following established standards. I'm thinking vanity? Or, just plain stubborn?

Good question

Hey rhubarb67,

Place this as your DOCTYPE and let me know what happens ... in IE8

I would but I'm trying to convert the site to HTML5 and I don't think I can use this DOCTYPE. I did however find a solution (I think). CSS3 needs more information than previous versions, for instance, this will display a dark background over a section of the menu when hovered over. And, it even works with IE8!

.nav ul li:hover {
background: #4f5964;
background: linear-gradient(top, #ADA989 0%, #D7D5C5 40%); /* the standard */
background: -moz-linear-gradient(top, #ADA989 0%, #D7D5C5 40%); /* FF 3.6+ */
background: -webkit-linear-gradient(top, #ADA989 0%, #D7D5C5 40%); /* Safari 5.1+, Chrome 10+ */
}

Greg