Whitespace after <li> tags
Posted: Wed Jun 09, 2010 5:26 pm
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?
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?