Ruby, Rails, Firefox, Anime, Mac
In: Web development20 Feb 2004
Take a look at this example page I set up in IE/Win or Opera, and then in a Gecko-based browser.
Notice that the positions of the list images in IE/Win and Opera are misaligned – they’re not in line with the text, but seem to be vertical-aligned to the top. After a bit of hair-pulling, I figured out that is because I applied “line-height:180%;”. Setting the line-height back to 100% for the <ul> works, but then I had to resort to adding margins to the <li> elements to simulate a line-height so that it’ll be consistent throughout the document.
Does anybody have an explanation why IE and Opera does it this way while Gecko browsers render it the other, seemingly correct, way?