SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    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

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit:

    I copied the correct code in your first post, and added the appropriate code tags.

    guido2004 - Community Team Advisor
    Last edited by guido2004; Oct 26, 2012 at 12:07. Reason: edit

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by foshan View Post
    My #horiznav top border is not working in chrome.
    It's working fine for me in Chrome. What are you seeing? Just no line at all, or ...?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's working fine for me in Chrome. What are you seeing? Just no line at all, or ...?
    Its working but what i'm seeing is that it is broken where my #horizlinks are.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by foshan View Post
    Its working but what i'm seeing is that it is broken where my #horizlinks are.
    OK, important detail.

    The problem is not the border, but that the links are overlapping the border. You could reduce the padding on them, or preferably, just get rid of the unnecessary background color. So eliminate the line in red:

    Code:
    #navlinks li a {
    padding: 7px 19px 6px;
    background: gray;
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. Worked a treat i reduced the padding and all is ok. I'm learning all the time with help from this site. Thanks again.
    Quote Originally Posted by ralph.m View Post
    OK, important detail.

    The problem is not the border, but that the links are overlapping the border. You could reduce the padding on them, or preferably, just get rid of the unnecessary background color. So eliminate the line in red:

    Code:
    #navlinks li a {
    padding: 7px 19px 6px;
    background: gray;
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    }

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad to help. Don't hesitate to ask more questions.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •