hi all,
I have designed this site for a client & there is a problem with my nav bar it looks all mangled up.
Taken from Sitepoint Book CSS Ant 3rd Edition.
http://rip-rugga.com/ in IE7 that is the only error I spotted.
Any help will be highly appreciated.
<div id=“nav-bar”> <ul>
<li class=“buy”><a href=“contact-us.html”>Contact Us</a></li>
<li class="articles"><a href="rates.html">Rates</a></li>
<li class="contact"><a href="feedback.html">Guest Feedback</a></li>
<li class="buy"><a href="gallery.html">Gallery</a></li>
<li class="articles"><a href="cape-town.html">Cape Town</a></li>
<li class="contact"><a href="accommodation.html">Accommodation</a></li>
<li class="recipes"><a href="index.html">Home</a></li>
</ul>
</div>
Html Above
Css Below
#nav-bar {
float: right;
width: 958px;
border-bottom: 5px solid #2582b6;
border-left: 2px solid #2582b6;
margin-bottom: 0;
display:inline;
}
#nav-bar ul {
margin: 0;
padding: 2em 10px 0 10px;
list-style: none;
}
#nav-bar li {
float: right;
background-image:url(…/images/tab_left.gif);
background-repeat: no-repeat;
list-style:none;
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}
#nav-bar a {
float: right;
display: block;
background-image:url(…/images/tab_right.gif);
background-repeat: no-repeat;
background-position: right top;
padding: 0.2em 10px 0.2em 0;
text-decoration: none;
font-weight: bold;
color: #155070;
}
#recipes #nav-bar li.recipes,
#contact #nav-bar li.contact,
#articles #nav-bar li.articles,
#buy #nav-bar li.buy {
background-image:url(…/images/tab_active_left.gif);
}
#recipes #nav-bar li.recipes a,
#contact #nav-bar li.contact a,
#articles #nav-bar li.articles a,
#buy #nav-bar li.buy a {
background-image:url(…/images/tab_active_right.gif);
background-color: transparent;
color:#FFFFFF;
}
/* End Nav-Bar */
Thank
Yourself