IE7 just gets worse and worse!

I have a div that contains a list, used for navigation. In IE, if I dont use a border the div seems to turn invisible; but if I turn it on, the background colour returns and you can see it!

Even when you cant see it, you can still highlight the text.

Here is my code:

HTML:

  <div id="navContainer">
    <ul id="nav">
      <li><a href="#">home</a></li>
      <li><a href="#">reviews</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">register</a></li>
      <li><a href="#">contact</a></li>
    </ul><br class="clear" />

  </div>

CSS:

#nav {
float:left;
width:720px;
height:45px;
list-style-type:none;
padding:0;
margin:0;}

#nav li {
display:inline;}

#nav a {
float:left;
margin-left:30px;
color:#333;
text-decoration:none;
font-weight:bold;
padding:10px 0;}

#navContainer {
background:#A4A4A4 url(../image/bgNav.gif) no-repeat 0 0;
border:#000 solid 1px;}

Any ideas?!?

Actually Ive just realised, if I just add one other property to it [e.g. width:100%;] it seems to fix it!


?!?!?!????

Actually, it doesnt. It leaves a little gap below the div. Does anyone know what might be wrong with it? I hate Microsoft with a passion

Sounds like you are having a problem with the padding or border-spacing properties.

Matt

Its wierd, if I just specify the background attributes, then the background of the div does not appear, but the div is still there??

What I often to in this case, is absolutely position the ul#nav, set ul#nav li to display: block instead of display: inline, then float the 'li' element instead of the 'a' element, which makes it easy to size the 'a' element in according the the dimensions set on the 'li'. This is all very easy when doing live testing in Firebug, and is pretty much bulletproof across the spectrum of browsers.

Try this:

#navContainer {
background-image:url(../image/bgNav.gif);
background-repeat: no-repeat;
background-color: #A4A4A4;
border:#000 solid 1px;}

Matt

I thought I'd follow up to my previous post by posting an attachment of a page that I am working on today. It happens that this page is mostly just a navigation structure at this moment, and may be a good study for you. Although not exactly like the menu you are describing, the basic principal that you require is included here. I have tested this menu in Firefox, IE7, and IE6.

Thanks, but Ive just realised it fixes if I remove 'float:left' from #nav! Which is wierd, Ive always thought you needed that in there with a horizontal list??

What you're running into is IE's stupid hasLayout nonsense. IE7 still uses it, so you're still going to run into this type of problem.

You might want to read this:
http://www.satzansatz.de/cssd/onhavinglayout.html