Forums

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
    Posts
  • December 11, 2010 at 11:54 am #30971
    The Rooster
    Member

    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


    

    
//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;
    
}
    December 11, 2010 at 2:38 pm #70009
    soap
    Participant

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

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