The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS li border navigation help

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #30971
    The Rooster

    I’m having some cross browser (OS + Broswer) issues.
    The code below should show a header with a navigation bar. When you hover over one of the links the background should change color and add a border that is in line with the navigation bottom border. If you view the code below on a mac + chrome you can see it works as I want it to, however on FF or different browsers on a windows machine the border of the li is one pixel below the bottom border of the navigation container.
    My question is, what is the best way to get this to work cross browser? thanks.


    //CSS Reset goes here

    html, body {
    height: 100%;
    font-family: verdana,arial;
    font-size: 0.9em;
    #header {
    background-color: green;
    height: 100px;
    min-width: 960px;
    #top_navigation {
    border-bottom: 2px solid green;
    min-width: 960px;
    #top_navigation ul {
    width: 960px;
    margin: 0 auto;
    height: 33px;
    #top_navigation ul li {
    float: left;
    line-height: 33px;
    #top_navigation ul li a {
    padding: 9px;
    color: #000;
    #top_navigation ul li a:hover {
    background-color: green;
    color: #fff;
    border-bottom: 2px solid blue;
    text-decoration: none;


    try messing with padding and margins with the ul and li’s

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.