Page 1 of 1

Whitespace after <li> tags

Posted: Wed Jun 09, 2010 5:26 pm
by HiddenS3crets
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
whitespace.png
whitespace.png (14.31 KiB) Viewed 1239 times
Any idea on how to remove this?

Re: Whitespace after <li> tags

Posted: Thu Jun 10, 2010 11:16 am
by kaszu
Instead of

Code: Select all

display: inline;
try

Code: Select all

display: inline-block;

Re: Whitespace after <li> tags

Posted: Thu Jun 10, 2010 4:48 pm
by HiddenS3crets
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.