The thing is, when I place "display: inline" inside li like in this case:

 

#navigation{
 [some declarations]
}

#navigation ul {
 [some declarations]
}

#navigation li {
 display: inline;
}

 

. . . the result renders the same on all browsers (except on IE of course). But when I use Opera, the whole inline list is 2-3 pixels higher than in other browsers (Firefox, Safari, Chrome). I tried removing "display: inline" and when I do, the rendering on all browsers are the aligned/the same. It's only when I insert "display: inline" that Opera renders it differently.

 

What could be the problem?

Edited January 28, 201016 yr by Sam G
added [code] tags

For all my horizontal menus I use float: left instead of display: inline for the li tag:-

#navigation li {
float: left;
}

 

However, I have seen it mentioned that display: inline is needed for IE6 (although I haven't found it necesary) so they have float: left and display: inline.

Edited January 28, 201016 yr by Sam G
added [code] tags

I take it you've removed your margins and padding? Do you use a reset stylesheet?