Sorry for the delay in replying - I have been away for a few days.
pa007 - Thanks so much - I have replaced my code with yours and all works fine in all browsers I have tested. I still can not see what was throwing it out before but this work really well.
I am experiencing one a few small problems still in IE 6 and below:
For some reason, the nav bar sits slightly to the left of the main content when viewed in IE 6 - but again, i can not see what is causing this - any ideas?
Also, When viewed in Safari or FF for mac, the nav bar sits pretty much centrally alligned - but when viewed in IE6 (and I think 7) the menu sits slight more to the left of the white backdrop? Again, I can not seem to get this to display as it does in Safari. I have played around with the padding between the li but this then throws it out in Safari and FF for mac?
You solve one problem and then run in to another!!
Any (more) help would be greatly appreciated!
Thanks again for taking the time to look through this,
Steve
My New
css:
- Code: Select all
/* Navbar */
#nav { width : 796px; height:50px; margin: auto; background-image:url(images/nav-main-bg.gif); background-repeat:no-repeat;}
* {
margin: 0;
padding: 0;
}
ul#nav {
float: left;
padding: 0px 8px;
}
ul#nav li {
display: inline;
}
ul#nav li a {
float: left;
height: 32px;
padding: 18px 7px 0 6px;
background: url('images/nav-bg.gif') 0 0 repeat-x;
text-decoration: none;
color: #fff;
font-size: 70%;
}
ul#nav li a.first_menu {
background: url('images/nav-bg-start.gif') top left no-repeat;
padding-left:25px;
}
ul#nav li a.last_menu {
background: url('images/nav-bg-end.gif') top right no-repeat;
padding-right:25px;
}
ul#nav li a:hover {
background-position: left center;
}
ul#nav li a.last_menu:hover {
background-position: right center;
}
and my
html as before:
- Code: Select all
<div id="nav">
<ul id="nav">
<li><a class="first_menu" href="#" title="Home">Home</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Search Engine Optimisation">Search Engine Optimisation</a></li>
<li><a href="#" title="Consultancy">Consultancy</a></li>
<li><a href="#" title="Pay per Click Advertising">Pay per Click Advertising</a></li>
<li><a href="#" title="Online PR">Online PR</a></li>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Case Studies">Case Studies</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li class="last_menu"><a href="#" class="last_menu" title="Contact Us">Contact Us</a></li>
</ul>
</div>