SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    browser link problem

    Hi all please forgive me but i am very new to web design and would like some help with my CSS.

    My problem is with my background color in my visited links. All is well in ie but when i load into firefox or google chrome my background color doesn't appear.

    Here is my HTML.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    
    <head>
    <link href="style.css"rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="header">This is the header
    
    <div id="horizlinks">
    <ul>
    	<li><a href="http://www.ebay.co.uk">Link 1</a></li>
    	<li><a href="http://www.google.co.uk">Link 2</a></li>
    	<li><a href="http://www.google.co.uk">Link 3</a></li>
    	<li><a href="http://www.google.co.uk">Link 4</a></li>
    </ul>
    </div>
    
    </div>
    
    <div id="leftnav">This is the left Nav</div>
    <div id="rightnav">This is the right Nav</div>
    <div id="body">This is the body</div>
    <div id="footer">This is the footer</div>
    
    </div>
    
    </body>
    
    </html>
    And here is my CSS

    Code:
    	#container {
    
    width:1000px;
    margin:0 auto;
    
    	}
    
    	#header {
    
    position:relative;
    width:1000px;
    height:100px;
    background-color:yellow;
    border-bottom: 1px solid #000000;
    
    	}
    
    	#leftnav {
    
    width:150px;
    height:500px;
    float:left;
    margin-top:5px;
    background-color:gray;
    border-right: 1px dotted #000000;
    
    	}
    
    	#rightnav {
    
    width:150px;
    height:500px;
    float:right;
    margin:5px 0;
    background-color:gray;
    border-left: 1px dotted #000000;
    
    	}
    
    	#body {
    
    width: 700px;
    height:500px;
    margin-top: 5px;
    margin-left:150px;
    
    	}
    
    	#footer {
    
    clear:both;
    width:1000px;
    height:50px;
    background-color:yellow;
    
    	}
    
    	#horizlinks ul {
    
    margin:0;
    position:absolute; left:250px; top:80px;
    
    
    	}
    
    	#horizlinks li {
    
    margin: 0 50px 0 0;
    list-style-type:none;
    display:inline;
    
    }
    
    
    	 #horizlinks a {
    
    color:black;
    padding-top:5px;
    padding-right: 10px;
    padding-left: 10px;
    text-decoration:none;
    font-style:verdana;
    font-weight:bold;
    font-size:14px;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
    
    }
    
     	#horizlinks a:visited {
    
    color:purple;
    text-decoration:underline;
    background-color:blue;
    
    }
    
    	 #horizlinks a:hover {
    
    background-color:gray;
    color:white;
    
    }
    I would be very grateful for someones help with this and also to let me know if i can improve my code in any way.

    Many thanks in advance.
    Last edited by Shyflower; Oct 25, 2012 at 13:12.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You are missing a background colour for the anchors; so that is why the blue for the visited pseudo :visited state isn't being shown, add: #horizlinks a {background: red;} and you'll see... The anchors basically should have a default background colour if you plan to change them.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    You are missing a background colour for the anchors; so that is why the blue for the visited pseudo :visited state isn't being shown, add: #horizlinks a {background: red;} and you'll see... The anchors basically should have a default background colour if you plan to change them.
    Thanks very much Robert iv'e altered the code and all is well. Thanks again

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No problem.


Bookmarks

Posting Permissions

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