Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2010
    Location
    London
    Posts
    13
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Link colour woks in firefox but not safari

    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 &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

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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <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 and fix the errors first. You can't nest a list item inside an anchor.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    natedowg (09-03-2010)

  • #3
    New Coder
    Join Date
    Jan 2010
    Location
    London
    Posts
    13
    Thanks
    7
    Thanked 0 Times in 0 Posts
    you helped an awful lot. As soon as i cleaned my code all was good ! sorry for being careless - im fairly new to this.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •