Hi there, im having trouble with my links in my sidebar. I have coloured a nav bar and a sub nav bar with success so cant understand why these links are ok in forefox and not in safari. My code and css are below. Many thanks for taking the time to overlook this problem !
xhtl
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Body Physics website" />
<meta name="keywords" content="Physical, Fitness, Sports, Conditioning, Body, Health, Nutrition, Physiotherapy, Massage, Body Fat" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Body Physics</title>
</head>
<body>
<div id="wrap">
<a href="#"><img id="logo1" src="images/BP_logo_orange.jpg" alt="logo" /> </a>
<div class="nav">
<ul>
<li><a href="#">WELCOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">TEAM</a></li>
<li><a href="#">TESTIMONIALS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">LINKS</a></li>
</ul>
</div>
<p class="bp">
<a href="#"><img id="logo" src="images/BP sign.jpg" alt="logo" /> </a>
</p>
<div class="subnav">
<ul>
<li><a class="nut" href="#">NUTRITION</a></li>
<li><a class="mas" href="#">MASSAGE</a></li>
<li><a class="pys" href="#">PHYSIOTHERAPY</a></li>
<li><a class="per" href="#">PERFORMANCE & FUNCTION</a></li>
<li><a class="los" href="#">4 WEEK FAT LOSS PROGRAM</a></li>
</ul>
</div>
<p class="line">
<img src="images/line.jpg" alt="logo" />
</p>
<div id="content">
<div id="left">
<h1>What we do</h1>
<p>Lorem ipsum ut vim ferri virtute mandamus, ipsum vidisse accumsan in eos. Mea duis facete officiis ut. Ex eam kasd bonorum vulputate, impedit conceptam te pro. Ea puto bonorum has, no solum corpora conclusionemque duo.
<br></br>
At eros legere meliore sea, tibique oporteat id nam. His dico eirmod comprehensam ea, te eum lobortis dissentias. Brute vocent at sit, vis ut nullam equidem democritum. Eam et vocent facilis. Vix timeam eloquentiam cu.
<br></br>
Dico imperdiet ne mea. Tritani eripuit abhorreant te mea, an viris equidem oporteat eos, no cum lorem oporteat. Malis imperdiet deterruisset ne nam, tollit deserunt cotidieque ex quo, an pri sumo timeam. Eu fugit dolor mei. Vix accusamus consequuntur et, admodum delicata urbanitas vel ut.
<br></br>
Usu iudico interpretaris at. Pro te ceteros feugait, dicta accusata mel cu. Eu tibique denique honestatis pro, eam minimum verterem te, ne nec ferri facete iriure. Doming tincidunt ea his. Kasd insolens nominati nec et, pro et diceret noluisse splendide, nam viderer equidem inimicus et. Eu mei primis fabellas nominati, vel antiopam gloriatur incorrupte no, iracundia concludaturque eum no.
<br></br>
Usu iudico interpretaris at. Pro te ceteros feugait, dicta accusata mel cu. Eu tibique denique honestatis pro, eam minimum verterem te, ne nec ferri facete iriure. Doming tincidunt ea his. Kasd insolens nominati nec et, pro et diceret noluisse splendide, nam viderer equidem inimicus et. Eu mei primis fabellas nominati, vel antiopam gloriatur incorrupte no, iracundia concludaturque eum no.</p>
</div>
<div id="right">
<h2>FAQ</h2>
<div class="faqp">
<ul>
<a STYLE="text-decoration:none" href="#"><li>Eu mei primis fabellas nomi ati, vel antiopam gloriatur incorrupte no, iracundia ?</li></a>
<a STYLE="text-decoration:none" href="#"><li>nam viderer equidem inimicus et. Eu mei primis fabellas nominati. ?</li></a>
<a STYLE="text-decoration:none" href="#"><li>nam viderer equidem inimicus et. Eu mei primis. ?</li></a>
</ul>
</div>
<h2>ARTICLES</h2>
<div class="artp">
<ul>
<a STYLE="text-decoration:none" href="#"><li>Eu mei primis fabellas nomi ati, vel antiopam gloriatur incorrupte no, iracundia ?</li></a>
<a STYLE="text-decoration:none" href="#"><li>nam viderer equidem inimicus et. Eu mei primis fabellas nominati. ?</li></a>
<a STYLE="text-decoration:none" href="#"><li>nam viderer equidem inimicus et. Eu mei primis. ?</li></a>
</ul>
</div>
<h2>FOLLOW US</h2>
<div id="FU">
<a href="#"><img src="images/fb.png" alt="fb" /></a>
<a href="#"><img src="images/ms.png" alt="ms" /></a>
<a href="#"><img src="images/t.png" alt="t" /></a>
</div>
</div>
</div>
<div id="foot">
<div class="footbar">
<ul>
<li><a href="#">WELCOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="copy">
<p>BodyPhysics.2010.All Rights Reserved.Design by NJones</p>
</div>
</div>
</div>
</body>
</html>
Css
Code:
body
html{
margin: 0;
padding: 0;
}
#wrap{
width: 1024px;
height:188px;
margin: 0 auto;
font-family: verdana;
background: url(images/banner.jpg) center no-repeat;
}
#logo{
padding: 0 0 0 130px;
border: none;
}
h1 {
font-size: 1.5em;
color: #ff8502;
}
h2 {
font-size: 1em;
color: #ff8502;
}
#logo1{
padding: 0 0 0 135px;
border: none;
}
.nav ul{
margin-top: -30px;
padding: 0 0 0 514px;
}
.nav ul li{
list-style: none;
display: inline;
}
.nav ul li a{
font-size: .8em;
padding: 0 0 0 10px;
text-decoration: none;
color: white;
}
.subnav ul{
margin-top: -63px;
padding: 0 0 10px 360px;
}
.subnav ul li{
list-style: none;
display: inline;
}
.subnav ul li a{
font-size: .7em;
padding: 0 0 0 5px;
text-decoration: none;
}
.nav a:hover{
color: #ff8502;
}
.subnav a:hover{
color: black;
}
.bp{
font-size: 2em;
margin: 10px 0 30px -68px;
}
.line{
margin: -20px 0 0 42px;
}
.nut{
color: #5bce45;
}
.mas{
color: #ec6d4c;
}
.pys{
color: #c3c136;
}
.per{
color: #208caf;
}
.los{
color: #afaaaa;
}
#foot{
clear: both;
}
.footbar ul{
margin-left: 396px;
}
.footbar ul li{
list-style: none;
display: inline;
}
.footbar ul li a{
font-size: .5em;
padding: 0 0 0 5px;
text-decoration: none;
color: #afaaaa;
}
.footbar a:hover{
color: #ff8502;
}
.copy {
font-size: .5em;
text-align: center;
color: #afaaaa;
margin-top: -10px;
}
#content {
padding-top: 10px;
}
#left {
float: left;
text-align: justify;
width: 600px;
margin: 0 10px 0 65px;
}
#right {
float: right;
text-align: left;
width: 250px;
margin: 24px 65px 0 -10px;
font-size: .8em;
}
#right ul {
list-style: none;
}
#right ul li {
background-image: url(images/tick.jpg);
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0 .5em;
}
#right ul li a {
color: #afaaaa;
}
#right a:hover {
color: #ff8502;
}
#FU {
padding-left: 30px;
border: none;
}
.faqp ul{
margin-left: -30px;
}
.artp {
margin-left: -30px;
}
img {
border: none;
}
Before you post, read our: 
