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; } Link to comment https://forums.phpfreaks.com/topic/124422-frustrating-unwanted-padding/ 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; } Link to comment https://forums.phpfreaks.com/topic/124422-frustrating-unwanted-padding/#findComment-642680 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! Link to comment https://forums.phpfreaks.com/topic/124422-frustrating-unwanted-padding/#findComment-642849 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. Link to comment https://forums.phpfreaks.com/topic/124422-frustrating-unwanted-padding/#findComment-643029 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? Link to comment https://forums.phpfreaks.com/topic/124422-frustrating-unwanted-padding/#findComment-643069 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.