TW Blog :: Entries for Browsers

Gecko Gaps

Also relates to CSS Design

Following a quick browse of the Bible this evening (in the absence of Big Brother Eviction's - supper viewing only, honestly!) I resolved the gap issue in the Mozilla browsers with the Forest Adventure web site rebuild. It all boils down to the way Gecko (in true Standards Mode) interprets the position of inline images in relation to the baseline. That is they sit on the baseline allowing a gap for the descending curve of certain lowercase letters (eg g, y).

That is all fine and dandy, and JZ gives an obvious quick fix - to declare images as block level elements - img {display:block;}

However, while this works in the scenario of a Transitional page with navigation images still nested in tabular cells, it will not work in a Strict environment with a horizontal nav bar composed of images nested in inline list elements. The fix was no more strenuous all the same. Since the gap is based on the defined font size for the element regardless of the existence of text, simply down sizing the size of the font resolves the gap - ul {font-size: 1px;}

Zero is not an acceptable value, but a font size of 1px clearly does the job. Of course as a user increases the default screen font size (in Mozilla or Opera) there comes a point when the gap will reappear, but by this time, the font is so large on rest of the page, it has become pretty illegible and ugly anyway!

Posted on Jul 05, 2003 at 01:23:21. [Comments for Gecko Gaps- 0]