Whitespace after <li> tags

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
HiddenS3crets
Forum Contributor
Posts: 119
Joined: Fri Apr 22, 2005 12:23 pm
Location: USA

Whitespace after <li> tags

Post 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 1241 times
Any idea on how to remove this?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Whitespace after <li> tags

Post by kaszu »

Instead of

Code: Select all

display: inline;
try

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

Post 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.
Post Reply