SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Top border not working in chrome

    Beginner advice please. My #horiznav top border is not working in chrome. Firefox and ie are fine. Does anyone know of a fix for this or if i have a coding error.

    Here is my code

    HTML


    Code HTML4Strict:
    <html>
     
    <head>
    <title>CSS Practice</title>
    <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"> Header 1 </a></li>
    <li><a href="http://www.tesco.co.uk"> Header 2 </a></li>
    <li><a href="http://www.screwfix.co.uk"> Header 3 </a></li>
    <li><a href="http://www.google.co.uk"> Header 4 </a></li>
    </ul>
    </div>
     
    </div>
     
    <div id="horiznav">
     
    <div id="navlinks">
    <ul>
    <li><a href="http://www.amazon.co.uk">Nav Link 1</a></li>
    <li><a href="http://www.argos.co.uk">Nav Link 2</a></li>
    <li><a href="http://www.facebook.co.uk">Nav Link 3</a></li>
    <li><a href="http://www.clymac.co.uk">Nav 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>


    CSS

    Code CSS:
    html,body, h1,h2,h3,h4,h5,h6,p,div,ul,li,a {
     
    margin:0;
    padding:0;
    border:none;
     
    }
     
     
    #container {
     
    width:1000px;
    margin: auto;
     
    }
     
    #header {
     
    position:relative;
    width:1000px;
    height:100px;
    background-color:yellow;
     
     
    }
     
    #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; top:78px;left:230px;
     
     
    }
     
    #horizlinks li {
     
    margin: 0px 40px 0px 0px;
    list-style-type:none;
    display:inline;
     
    }
     
     
    #horizlinks a {
    background:red;
    color:black;
    padding:7px 24px 6px;
    text-decoration:none;
    font-weight:bold;
    font-size:14px;
    border-radius:5px
     
     
    }
     
    #horizlinks a:visited {
     
    colorurple;
    text-decoration:underline;
    background-color:blue;
     
    }
     
    #horizlinks a:hover {
     
    background-color:gray;
    color:white;
     
    }
     
     
     
    #horiznav {
     
    width:1000px;
    height:30px;
    position:relative;
    background:gray;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
     
     
    }
     
    #navlinks {
     
    position:absolute; top:5px;left:230px;
     
    }
     
    #navlinks ul {
     
    margin: auto;
     
     
    }
     
    #navlinks li {
     
    margin:0px 36px 0px 0px;
    list-style-type:none;
    display:inline;
     
    }
     
    #navlinks li a {
     
    padding:7px 19px 6px;
    background:gray;
    color:white;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
     
    }
     
    #navlinks a:visited {
     
    colorurple;
     
     
    }
     
    #navlinks a:hover {
     
     
    color:black;
     
     
    }
    Last edited by guido2004; Oct 26, 2012 at 12:05. Reason: inserted correct code and added code tags


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
  •