Trium918 Posted July 27, 2007 Share Posted July 27, 2007 The nav-bar looks just fine at first site, but when you roll the mouse over the nav-bar the "a:hover" isn't aligning up properly. Please try the example below in order to get a better understanding. I figure that the problem has something to do with the padding, but I can not get it to align correctly. <html <head> <style type="text/css"> #topnav{ width: 760px; font-weight: bold; height 25px; padding-top: 2px; padding-bottom: 2px; margin-bottom: 10px; } #topnav ul{ border: 1px solid #BBB; background-color: #0000CC; padding: 4px 0; margin: 0; text-align: left; } #topnav ul li{ display: inline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; } #topnav ul li a{ color: #FFFFFF; padding: 4px 7px; text-decoration: none; margin: 0; border-right: 1px solid #DADADA; } /* Controls topnav after users clicks link */ #topnav ul li a:visited{ color:#FFFFFF; text-decoration: none; } /* Topnav acts like a rollover */ #topnav ul li a:hover{ background-color: #FFFFFF; color: #003366; } </style> </head> <body> <div id="topnav"> <ul> <li><a href="index.php">Home</a></li> <li><a href="">Browse</a></li> <li><a href="search.php">Search</a></li> <li><a href="">Forum</a></li> <li><a href="blog.php">Blog</a></li> <li><a href="login.php">Login</a></li> <li><a href="register_form.php">Register</a></li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted July 28, 2007 Share Posted July 28, 2007 This worked fine when I try it in both FF and IE 6. Quote Link to comment Share on other sites More sharing options...
Trium918 Posted July 28, 2007 Author Share Posted July 28, 2007 This worked fine when I try it in both FF and IE 6. If you look closely, then you will notice that the Home link is the only word that is aligned center. Hover over the links such as Browse, Search etc, and you will notice that the space in the left corner. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted July 28, 2007 Share Posted July 28, 2007 You don't need to have the topnav links include the ul and li tag. The a tags alone will control the effects. Although, after all this, I realize you have a typo in your code. You had "height 25px", it should have been height:25px". Would this perhaps be more what you are looking for? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> #topnav{ width: 760px; font-weight: bold; height: 25px; padding-top: 2px; padding-bottom: 2px; margin-bottom: 10px; } #topnav ul{ border: 1px solid #BBB; background-color: #0000CC; padding: 4px 0; margin: 0 auto; } #topnav li{ display: inline; padding: 4px 8px 4px 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; border-right: 1px solid #DADADA; } #topnav a:link, #topnav a:visited{ color: #FFFFFF; text-decoration: none; } #topnav a:hover, #topnav a:active{ background-color: #FFFFFF; color: #003366; } </style> </head> <body> <div id="topnav"> <ul> <li><a href="index.php">Home</a></li> <li><a href="">Browse</a></li> <li><a href="search.php">Search</a></li> <li><a href="">Forum</a></li> <li><a href="blog.php">Blog</a></li> <li><a href="login.php">Login</a></li> <li><a href="register_form.php">Register</a></li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Trium918 Posted July 28, 2007 Author Share Posted July 28, 2007 That's it! Thank you. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted July 28, 2007 Share Posted July 28, 2007 Glad to help. Please note the use of a proper DOCTYPE. Also, when messing with link tags in css, you should ALWAYS cover your butt by listing the four states right off the bat. And they MUST always be in the proper order (or they will do very strange things) which is: a:link, a:visited {} then a:hover; a:active{} For the rest of your css whenever modifying a particular a tag within a class or ID if you don't modify them all, then those not modified will fall back to the initial tag default. And if you leave out visited? MAN will you have issues with hovers and link styling in IE. Good luck. Dave Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.