PDA

View Full Version : Unexplainable Gap in bottom of CSS Menu.



bluemagic
Jul 3rd, 2009, 11:34 PM
http://www.nickhilton.com, in Firefox and IE8.

I'm referring to the extra space in between the menu text and the bottom border of the menu.

Menu CSS:


#menu {
overflow :hidden;
position: relative;
margin: 5px 0 5px;
border-top: 0.1em solid #555753;
border-bottom: 0.1em solid #555753;
line-height: 1
}
#menu ul {
float: left;
list-style: none;
position: relative;
left: 50%;
}
#menu ul li {
float: left;
position: relative;
right: 50%;
}
#menu ul li a:link,
#menu ul li a:visited,
#menu ul li a:active {
display: block;
padding: 5px 21px;
color:#333;
text-decoration: none;
font-family:"palatino linotype", verdana, serif;
font-weight:bold;
}
#menu ul li a:hover {
background: #C63;
color: #003399;
}
#menu li.current a {color:#000}

This has been making me go crazy. I don't see that particular space anywhere in the code...

Am I looking in the wrong place? Is it somewhere else in the CSS? Thanks so much in advance.

Kodah
Jul 4th, 2009, 01:05 AM
you have an error caused by the ampersand in news & events. this may or may not be the cause of the problem but fix the error and see what happens.

validate your code here (http://validator.w3.org/)

djm0219
Jul 4th, 2009, 01:44 AM
Remove the float: left; from #menu ul li and adjust the positioning horizontally from there. You may want to validate the CSS also as it generates 1 error and 83 warnings.

bluemagic
Jul 5th, 2009, 12:53 AM
you have an error caused by the ampersand in news & events. this may or may not be the cause of the problem but fix the error and see what happens.

validate your code here (http://validator.w3.org/)

Eek! What an embarassing error. Corrected. :)

bluemagic
Jul 5th, 2009, 12:54 AM
Remove the float: left; from #menu ul li and adjust the positioning horizontally from there. You may want to validate the CSS also as it generates 1 error and 83 warnings.

How do I adjust the positioning of many list items like that? Forgive me for my ignorance. Could you give an example of how I'd do it? Thanks!

Kodah
Jul 5th, 2009, 05:43 PM
on block elements you can use the "display" attribute like:
li {display:inline; margin-left:5px;} this code will take the list items and display them horizontally and the spacing is maintained with the margin setting

bluemagic
Jul 7th, 2009, 07:27 AM
^ Thanks for the tip, Kodah. But that doesn't seem to solve the issue at hand, unless I'm doing it wrong...?

abduraooft
Jul 7th, 2009, 11:06 AM
Try
#menu ul {/*nickhilton.css (line 135)*/
float:right;
/*left:50%;*/
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
position:relative;
}

bluemagic
Jul 8th, 2009, 08:04 AM
^ Thanks. Setting margin to 0 did it. Why didn't I think of that. :p

abduraooft
Jul 8th, 2009, 09:04 AM
^ Thanks. Setting margin to 0 did it. Why didn't I think of that. :pYou might not have firebug (http://getfirebug.com) in your FF :)