unwanted space between li elements in IE

[ant.eater]

hi,

i am having a bit of difficulty with a basic CSS problem which totally ruins my layout :/

I am using an unordered list as a menu and i am using this CSS rules for it:

Code: Select all

ul{ 
font-family: tahoma; 
font-size: 10px; 
letter-spacing: 1pt;
list-style-type: none;
}
 
li{
text-align: right; 
}

quite basic formatting, but the problem i am having is it looks different on IE and FF. i get unwanted space between two list elements, please check the attached screenshot below.


i tried using padding:0px and margin: 0px but it didnt help.

how can i get rid of the unwanted space in IE ( so that it looks like the firefox screenshot) ?

thanks.

[ant.eater]

the problem is solved.

please check this link if you suffer from the same thing

regards.

[muneepenee]

li{display:inline}
the web "gurus" kall this a "hack".
its 1 wae tu get rid av xtra carriag-reterns IE add sumtimes.

[Kim Steinhaug]

Setting display: inline; solves the symptom but not the accuall problem, you also enter another problem since you change the behaviour of the list by making every element inline instead of blocks. Problem is that IE is "padding" each element with a certain height from the font-size.

An example of this is trying to create a <div> which is 1px in height, you will have huge problems acomplishing this in IE, though Firefox displays it 1px without any problems.

Since you have set your font-size to 10px, you can also set the line-height to 10px and the problem is solved.

Mvh,
Kim Steinhaug
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
www.steinhaug.no - www.easywebshop.no - www.easycms.no