The <li> tags in my navigation menu have an extra whitespace which is screwing up the vertical alignment.
Here's the CSS for the navigation
[text]#navigation {
height: 35px; /* height of green area */
line-height: 35px; /* matching line-height to set vertical alignment */
background: #56A76B;
padding: 0;
margin: 15px 0;
}
#navigation ul {
width: 878px;
list-style: none;
padding: 0;
margin: 0;
}
#navigation li {
display: inline;
padding: 0;
margin: 0 0 0 25px;
}[/text]
By setting the height and line-height to the same value it should give a perfect vertical alignment of my menu items. The problem is that it's offset a bit because of (what i'm guessing) is an extra white-space at the end of each <li> element.
Here's what it looks like when I highlight the text
Any idea on how to remove this?
Whitespace after <li> tags
Moderator: General Moderators
-
HiddenS3crets
- Forum Contributor
- Posts: 119
- Joined: Fri Apr 22, 2005 12:23 pm
- Location: USA
Re: Whitespace after <li> tags
Instead of try
Code: Select all
display: inline;Code: Select all
display: inline-block;-
HiddenS3crets
- Forum Contributor
- Posts: 119
- Joined: Fri Apr 22, 2005 12:23 pm
- Location: USA
Re: Whitespace after <li> tags
The problem resolved itself because I ended up changing the font, size, weight, etc.
I did try using inline-block with the settings given above and there was no difference, extra space was still there.
I did try using inline-block with the settings given above and there was no difference, extra space was still there.