Extra padding on li

Hi guys,

im a bit stuck on how to get rid of this extra padding on the li’s

see the image http://i49.tinypic.com/9glrht.jpg

i just put a white border around so you can see the extra padding on the top and bottom

here is my css


* {
	margin: 0;
	padding: 0;
	border: 0;
}

#topnav ul li {
	border: #fff 1px solid;
	margin: 5px 0px 0px 10px;
	padding-right: 7px;
	list-style: none;
	float: left;
	color: #ffffff;
}

#topnav ul li a {
	color: #ffffff;
	text-decoration: none;
	font-size: 0.92em;
}

#topnav ul li a:hover {
	text-decoration: underline;
}

here is my html

<div id="topnav"><ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul></div>

That’ll be the 7px right padding you added to the list :slight_smile:


[COLOR=#CC00CC]#topnav[/COLOR] ul li [COLOR=#66CC66]{[/COLOR]

    [COLOR=#000066]border[/COLOR]: [COLOR=#CC00CC]#fff[/COLOR] [COLOR=#993333]1px[/COLOR] [COLOR=#993333]solid[/COLOR];

    [COLOR=#000066]margin[/COLOR]: [COLOR=#993333]5px[/COLOR] [COLOR=#993333]0px[/COLOR] [COLOR=#993333]0px[/COLOR] [COLOR=#993333]10px[/COLOR];

   [B] [COLOR=#000066]padding-right[/COLOR]: [COLOR=#993333]7px[/COLOR];[/B]

    [COLOR=#000066]list-style[/COLOR]: [COLOR=#993333]none[/COLOR];

    [COLOR=#000066]float[/COLOR]: [COLOR=#000066]left[/COLOR];

    [COLOR=#000066]color[/COLOR]: [COLOR=#CC00CC]#ffffff[/COLOR];

[COLOR=#66CC66]}[/COLOR]




yeh just figured that out, thanks :blush:

Sorry - I missed the top and bottom part :slight_smile:

You’ll need to adjust the line-height in the list element:


#topnav ul li {
    border: #fff 1px solid;
    margin: 5px 0px 0px 10px;
    padding-right: 7px;
    list-style: none;
    float: left;
    color: #ffffff;
   [B] line-height:1;
}[/B]

You can reduce the line-height even more but you will probably lose the ascenders and descenders in some browsers.

the right padding is what i want, but it seems to have some padding at the top and bottom too a few pixels, is there a way i can get rid of that?