Navigation problems in ie7

[NicolaHWS]

Hi, I need some help if possible! I'm designing a website for a local enterprise charity and I'm having trouble making the navigation work in ie7 - it works in all other browsers but in ie7 the nav bar is there but it's like it's a solid image, the rollover effect doesn't work and the links are ignored like they aren't there. The website can be seen in its temporary location here

This is the navigation code:

<div id="nav">
<ul>
<li<?php if ($pagename == 'home'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>" title="home">Home</a></li>
<li<?php if ($pagename == 'about'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/about.php" title="about">About</a></li>
<li<?php if ($pagename == 'news'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/news.php" title="news">News</a></li>
<li<?php if ($pagename == 'resources'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/resources.php" title="resources">Resources</a></li>
<li<?php if ($pagename == 'newsletters'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/newsletters.php" title="Newsletters">Newsletters</a></li>
<li<?php if ($pagename == 'gallery'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/gallery.php" title="gallery">Gallery</a></li>
<li<?php if ($pagename == '5blossom'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/5blossom.php" title="5blossom">Make £5 Blossom</a></li>
<li<?php if ($pagename == 'big13'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/big13.php" title="big13">The Big 13</a></li>
<li<?php if ($pagename == 'warwick'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/warwick.php" title="warwick">The Warwick Award</a></li>
<li<?php if ($pagename == 'young'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/young.php" title="young">Young Entrepreneurs</a></li>
<li<?php if ($pagename == 'game'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/game.php" title="game">Interactive game</a></li>
<li<?php if ($pagename == 'links'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/links.php" title="links">Links</a></li>
<li<?php if ($pagename == 'partners'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/partners.php" title="partners">Partners</a></li>
<li<?php if ($pagename == 'About'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/contact.php" title="contact us">Contact us</a></li>
</ul>
</div><!--nav close-->

And this is the CSS

#nav {
width: 260px;
display: block;
margin-left: -1000px;
margin-top: 40px;
float: left;
text-align:right;
}

#nav ul {
list-style: none;
display: block;
text-align: right;
}

#nav ul li {
z-index: 10;
width: 275px;
text-align: right;
margin-left: 1000px;
padding-top: 5px;
list-style:none;
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
margin-bottom: 20px;
}

#nav ul li a {
color: #000;
background: url(images/nav.gif) right 0 no-repeat #ffa200;
height: 29px;
margin-left: -700px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 500px;
padding-right: 20px;
text-align: right;
}

#nav ul li a:hover {
background: url(images/nav-hover.gif) right 0 no-repeat #cd0015;
padding-left: 500px;
padding-right: 20px;
color: white;
}

#nav ul li a:current {
background:url(images/nav-hover.gif) #cd0015 right 0 no-repeat;
padding-right: 20px;
}

I can't tell if the problem is the CSS or the links themselves, I'm at a loss! Been trying to find a solution for months Please help!

[Excavator]

Hello NicolaHWS,
Right off I notice you don't float .logo and use a negative margin to bring .tabs up alongside it. IE7 is famous for having trouble with negative margins...I pretty much make it a rule never to use them. If there is ever a case where negative margins seem to be the only way, it may actually be ap that is needed.
Not always, negative margins have their place. I don't think this is an example though.


So...
Floats are how we put elements beside each other. When you don't float .logo, .tabs has no way of being beside it.

Look at it this way once -

#header .logo {
    background: url("images/logo.gif") no-repeat scroll left top transparent;
    float: left;
    height: 112px;
    margin-top: 20px;
    width: 363px;
}
#header .tabs {
    float: right;
    /*margin: -148px auto;*/
    width: 500px;
}

[NicolaHWS]

Thanks for getting back to me so quick

Ironically, the tabs work fine in ie7, is the navigation down the side that's refusing to work. If I can't find a way I might just have to have in ie7 stylesheet and make the nav different, just won't look nearly as pretty is all Frigging ie7! Always screw up my designs, I usually don't bother with it anymore but this one will be looked at a lot by school pupils, and schools often have outdated browsers

[Excavator]

#nav {
    display: block;
    float: left;
    margin-left: -1000px;
    margin-top: 40px;
    text-align: right;
    width: 260px;
}
#nav ul li {
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    list-style: none outside none;
    margin-bottom: 20px;
    margin-left: 1000px;
    padding-top: 5px;
    text-align: right;
    width: 275px;
    z-index: 10;
}

I would question the reason for any left/right margin that huge.

In your ie7.css -

#nav ul {
	width: 960px;
	list-style: none;
	margin: 0 auto;
	float: right;
}

[NicolaHWS]

The margin is that big to make absolutely sure no matter how high a resolution someone's screen is the background goes all the way across, I did try reducing it right down to see if it made a difference and it didn't

[Excavator]

Originally Posted by NicolaHWS

The margin is that big to make absolutely sure no matter how high a resolution someone's screen is the background goes all the way across, I did try reducing it right down to see if it made a difference and it didn't

Not sure what that means since your background is just a color. Since you don't specify a color, it's whatever I've set my browser with on my end.

It looks like you mean for #nav and #wrapper to be beside each other. That's normally done by floating one or both of those elements. Look at a simplified example of a 2-column layout here. It's very easy to adapt that to a full width page like yours.
The three things I highlighted in my previous post, the huge margins (both -/+) and the width of the ul are what are causing your problem. That and not understanding how floats solve your problem (like floating 100% width elements).

Have a look at a float tutorial here.

Another problem, you generically apply margin: 0 auto; to almost all your div elements. Auto margins is a centering technique and putting it on full width elements like the body of your document or an element that is supposed to go beside another like your #wrapper doesn't make sense.

[NicolaHWS]

Thanks for your help everyone, I've got it working now. Still not sure how, I just fiddled and prodded until it worked!