Updated: MY CSS Navigation bar buttons disappear in IE7

[typewriterman724]

UPDATING Post: Using different laptop (MacBook wi Parallels XP, IE7 + Firefox + IETester) got VERY DIFFERENT results: The Nav Bar buttons work fine in IE7, Firefox and IE7 + IE8 on IE Tester application BUT, buttons disappear in IE6. Obviously, more needed, and now I gotta figure the Hack for IE6…sigh. Help still welcomed…typewriterman724

I think my brain has hit a wall and I need some help.

Am working on a site for a new client and I thought I’d done a nice navigation system with rollovers and background image for the buttons, etc.

The thing works great in Firefox on a PC and Firefox, Safari & Opera on my Mac.

Uploaded pages to a test location, and the buttons on the horizontal nav bar disappear in IE7 on one of the XP laptops in our house (still need to test it with other IEs), and I’m not sure why. The bottom border of the Nav Bar is still there. (Note: The nav system & code are pretty similar to an exercise I came across that seems to work fine. Can’t figure out where I broke it.)

Maybe fresh eyes and minds can help figure it out. And any help would be greatly appreciated. (I put the page through the w3c validator and got 4 errors, all in another part of the page code that’s not part of the main nav bar.)

The site/page is at:

http://www.mdeanhill.com/magiesplace/index.html

I’ll put the navigation code and css code below.
First the xhtml code from the page:

Code:

• Home
• About Us
• Contact Us
• Products

Here’s the relevant CSS

Code:

#mainNav {
position: relative;
}
#navBar {
width:700px;
margin:50px auto;
min-height:50px;
overflow:hidden;
background:white;
border-bottom:5px solid #006500;

}
/* and more from another part of the css document */

#navBar ul{
position: absolute;
left: 290px;
bottom: 5px;
}

#navBar ul {
list-style:none;
margin:0;
padding:0;
float:left; /*==contains floated list items?==*/
}
#navBar li {
list-style:none;
float: left;
margin: 0;
padding: 0;
display:inline;
}
#navBar li a:link, #navBar a:visited {
font-family:Times, serif;
font-weight:bold;
font-size:120%;
font-style:italic;
display: block;
color: #006500;
text-decoration: none;
padding: 0 13px 0 13px;
margin-right: 30px;
line-height: 25px;
background: url(../media/general/magie_plank700x25.jpg);
border: none;
}
#navBar li a:hover {
color:white;
}
#navBar li a.current {
margin-top: -5px;
height: 30px;
background: url(../media/general/magie_plank700x35.jpg) no-repeat;
color: #006500;
line-height: 25px;
}
#navBar li a.current:hover {
cursor: default;
}
#navList {
display:inline;
}

Thank you again for any help. Sometimes I feel real good about my coding skills and then there are days when all that confidence melts away. :)
typewriterman724…

[garyj517]

I am having a very similar problem, although I don’t know which IE version I was using when my navbar didn’t work. I used javascript for the onMouseOver and onMouseOut, but the effect works find in Firefox and Safari, just not IE. Did you find anything out yet?

[Author]

Posts