bpops Posted September 16, 2008 Share Posted September 16, 2008 I'm trying to create a 'simple' navigation bar similar to the at the top of the page here: http://www.monstersandcritics.com/ For some reason, however, when I attempt this, I get a padding that shows up on the top and bottom of the <a>'s. For example, and the 'selected' tab, which is white, (or above a tab when hovered over), gray is visible both at the top and bottom. http://www.b-pops.com/test/ I've tried everything I can think of, including copying the necessary code from the example site but I still get this padding issue. Any help is much appreciated. The code is below. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="wrapper"> <ul id="navigation"> <li><a href="">Link #1</a></li> <li><a href="">Link #2</a></li> <li><a href="">Link #3</a></li> <li class="selected"><a href="">Link #4</a></li> <li><a href="">Link #5</a></li> <li><a href="">Link #6</a></li> <li><a href="">Link #7</a></li> <li><a href="">Link #8</a></li> </ul> </div> </body> </html> CSS: html{ font-size:100%; } body { text-align: center; margin: 0 auto; margin-bottom: 10px; background: #fff; font-family: Arial, sans-serif; font-size: 0.8em; color: #3f3f3f; } a { color: #000; text-decoration: none; font-weight: bold; } a:hover{ text-decoration: underline; } img{ border: 0px; margin: 0; } #wrapper{ width: 994px; padding: 0; margin: 0 auto; position: relative; } ul#navigation{ clear: both; background: #e6e6e6; padding: 0px; margin: 20px 0 0 0; margin-bottom: 15px; border-top: 1px solid #666; list-style: none; text-align: center; font-family: Arial, sans-serif; } ul#navigation li{ display: inline; line-height: 2.5em; margin: 0 5px 0 5px; padding: 0px; } ul#navigation li a{ padding: 0.5em 1em 0.5em 1em; text-align: center; margin: 0px; font-weight: normal; color: #666; } ul#navigation li a:hover{ background: #333; color: #fff; } ul#navigation li.selected a{ background: #fff; border: 1px solid #666; border-top: 0; border-bottom: 1px solid #fff; color: #444; } ul#navigation li.selected a:hover{ background: #fff; color: #444; } Quote Link to comment Share on other sites More sharing options...
dropfaith Posted September 16, 2008 Share Posted September 16, 2008 i see a few possible causes i seperated them with <!-- also why did you use margin: 20px 0 0 0; margin-bottom: 15px; margin bottom is declared in the margin 20px 0 0 0; and not needed to be used a second rule ul#navigation{ clear: both; background: #e6e6e6; padding: 0px; <!-- margin: 20px 0 0 0; <!-- margin-bottom: 15px; border-top: 1px solid #666; list-style: none; text-align: center; font-family: Arial, sans-serif; } ul#navigation li{ display: inline; line-height: 2.5em; <!-- margin: 0 5px 0 5px; padding: 0px; } ul#navigation li a{ <!-- padding: 0.5em 1em 0.5em 1em; text-align: center; margin: 0px; font-weight: normal; color: #666; } Quote Link to comment Share on other sites More sharing options...
bpops Posted September 16, 2008 Author Share Posted September 16, 2008 Thanks for the reply dropfaith. The second margin declaration in ul#navigation is a remnant of an earlier code. Just ignore it, sorry about that. The other margin and padding lines you pointed to are not the problem as far as I can tell. The margin in ul#navigation li simply spaces the links out, and if the padding on the 'li a's can be changed to work, I don't know how to do it. If anyone else has any ideas, please let me know. It's made the more frustrating since the example site works, but I can't even get their code to work! Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted September 16, 2008 Share Posted September 16, 2008 From my testing it appears to be caused by the line-height set in ul#navigation li setting it to 2.3em or lower removes the space. Quote Link to comment Share on other sites More sharing options...
bpops Posted September 16, 2008 Author Share Posted September 16, 2008 Thanks, wildteen. I had played with that line-height a bit and noted changes, but I'm confused as to how the line-height of 2.5em is set exactly. If lineheight on <li> is 2.5em, and the padding on <a> is 0.5em, then wouldn't <a> be 2.0em tall? Then there's 0.5 em leftover... but then setting <li> to 2.0 makes the <a> larger than <li>. Is there a better explanation of this? 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.