...

View Full Version : Link colour woks in firefox but not safari



natedowg
09-03-2010, 11:11 AM
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




<!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 &amp; 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




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;
}

abduraooft
09-03-2010, 11:29 AM
<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>

Validate your markup (http://validator.w3.org/#validate_by_input) and fix the errors first. You can't nest a list item inside an anchor.

natedowg
09-03-2010, 11:40 AM
you helped an awful lot. As soon as i cleaned my code all was good ! sorry for being careless - im fairly new to this.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum