css list - inline height

[SLEE]

ive got a list that ive made display inline so they are in a line.
is there a way to force the <a> tag to the correct height (20px)?
i cant float them as the ordering of the menu will be wrong.

here is my css:

Code:

#top #menu li{
display:inline;
list-style-type:none;
margin:0;
padding:0;
}


#top #menu a:link, #top #menu a:visited, #top #menu a:active{
color:#000099;
font-size:11px;
text-decoration:none;
padding: 10px 10px 5px 10px;
background-color:#CCCCCC;
border-left:1px solid #ffffff;
text-align:center;
display:block;
}

help 

[Mr Anderson]

ive got a list that ive made display inline so they are in a line.
is there a way to force the <a> tag to the correct height (20px)?

Line-height or padding.

i cant float them as the ordering of the menu will be wrong.

Floating left won't change the order of floated elements.

[SLEE]

the line height worked but im getting a gap between each item. it seems to be the li but i cant see what it could be.

Code:

#top #menu{
position:absolute;
top:67px;
right:0px;
height:30px;
width: 640px;
text-align:right;
}

#menu li{
display:inline;
}

#top #menu a:link, #top #menu a:visited, #top #menu a:active{
color:#000099;
font-size:11px;
text-decoration:none;
padding: 5px 10px 5px 10px;
background-color:#CCCCCC;
border-left:1px solid #ffffff;
height:20px;
text-align:center;
margin-top:5px;
line-height:50px;
}

re the ordering ok technically you are right as it doesnt change the order but it means the the first list item is on the right. i guess itjust stacks them differenty is a better explanation.

[Mr Anderson]

the line height worked but im getting a gap between each item. it seems to be the li but i cant see what it could be.

More info required (preferably in the form of a link to somewhere I can see the problem), but - what browser(s)? Gap where?

re the ordering ok technically you are right as it doesnt change the order but it means the the first list item is on the right

That will only happen if you float them to the right, which your initial post gave no indication of being the case. Your latest shows that you've added text-align: right; to right align things, which means my earlier comment is irrelevant.

[SLEE]

ive been messing with the code so ive added and taken all bits of css in and out.
here is a screenshot of the problem:



you can see there is a gap between each list item.

thanks for the help

[Mr Anderson]

I can't see it there so check your default margins and padding settings - have you overridden the browser defaults or not? What margins and padding is being applied to list items?