[RESOLVED] Works on IE7, CSS layout messed up in Firefox3

Okay, so I have a new layout I’m working on, which I got working fine but the code was a bit messy/superfluous.

[url]http://romana.webcity.com.au/~cat49763/new/index.shtml[/url]

So, I had a go at cleaning it up a bit and using the margins for positioning as best I can. It works fine in IE7 and looks identical to the first design (apart from some spacing changes I made on purpose in the footer section).

[url]http://romana.webcity.com.au/~cat49763/new/index_test.shtml[/url]

Firefox (my default and preferred browser) however is not liking the changes. The content background image (of which there is just one now instead of a header and a content bg like in the first design) is not sitting at the top of the page, instead its starting at about 165px down – the margin-top for the navbar. If I change the margin-top on the contentbg div to -165px, it moves up to the right spot but it takes the nav bar to the top with it. In IE, the -165px top margin pushes the image off the page by 165px, as you would expect.

Why is the navbar linked to the contentbg now? Is it because I took it out of the nested nav divs I had previously used?

The other elements of the page are also all overlapping but I think I can tweak those once I get the background in the right position.

[code=html]
<div id=”contentbg”>

<ul id=”nav”>
<li><a href=”index.shtml”>Home</a></li>
<li><a href=”sessions.shtml”>Sessions</a></li>
<li><a href=”products.shtml”>Products</a></li>
<li><a href=”gallery.shtml”>Gallery</a></li>
<li><a href=”contact.shtml”>Contact</a></li>
<li><a href=”clients.shtml”>Clients</a></li>
<li><a href=”http://cathrynjupp.com/blog/”>Blog</a></li>
</ul>

</div>[/code]

CSS:

[QUOTE]

#contentbg {
background: #fff url(images/contentbg.jpg) center top no-repeat;
margin:0 auto;
margin-top:0;
width:900px;
min-height:600px;
text-align:left;
}

#nav {
overflow:hidden;
background:transparent;
margin-left:323px;
margin-top:165px;
width:900px;
list-style-type:none;
padding:0;
}

#nav li {
float:left;
}

#nav li a {
display:block;
width:65px;
padding:3px;
margin-left:6px;
text-align:center;
}

#nav li a:link, #nav li a:visited {
font-weight:bold;
text-decoration:none;
color:#ccc;
background-color:#666;
}

#nav li a:hover {
font-weight:bold;
color:#666;
background-color:#ccc;
}

[/QUOTE]

Btw, everything validates, the CSS and the HTML of both versions. I’m just hoping I’ve missed something simple on the second version so I can have a cleaner code.

Thanks in advance for your help ?

Also in #CSS _↴