Previous Message
Next Message

gaps below images, [was] (no subject)Michael Larocque

Sent by Gunlaug_Sørtun on 15 March 2006 16:04

Philippe Wittenbergh wrote:
> That {font-size: 1px; line-height: 0;} was once advocated, a very 
> long time ago, in the early days of this list. But it is full of 
> problems, as you make you layout dependent on font- sizes. Something 
> that is not much under control of the stylesheet author.

I know it's an old "fix" and I'm aware of the problems, but (as
mentioned) that is only if there's /any real text/ in that element. Not
hard to avoid, and the good browsers are not affected by unavoidable

> It is enough for the user to set a minimum font-size in his/her 
> browser, or need to size up the text a little, and the problems 
> start.

I always use 'minimum font size = 14px', and I always test to twice that
size (or more) - and to at least '200% font-resizing' or 28px size on
body-text. No visible problems in that scenario in any of the good
browsers I have available - but I agree that it is a "conditional fix".

So is 'vertical-align: bottom' btw, as the gap that is avoided at the
bottom may end up being quite visible at the top (in addition to what's
already there), when subjected to a "little bit" of font resizing.

If 'display: block' can't be used and 'float' is not an option, then
throwing both 'font-size/line-height' and 'vertical-align: bottom' at
the mess may be seen as an "overdone but pretty solid" option.
( That's 'a 12 lbs. CSS sledgehammer' used by 'a pretty mad web
carpenter', and it does work remarkably well at times :-) )

> And as you mention, the problems with IE win ... something that can 
> be controlled when working with static pages (hand-coding), but when 
> using wysiwyg editors (Dreamweaver formats the source code) or CMS 
> editors, it is next to impossible to control.

Yes, IE is buggy, and most tools are weak. I know only too well, so I
avoid using any of those when I can.
OTOH: I don't see a minor bug in IE as a big deal, so I rather leave
those to the IE-team.
Wouldn't mind if the other tools were a bit more accommodating, but I
won't complain too much about others' until I have created some of my
own that can get the job done properly.

It is interesting that such a trivial thing as getting rid of a gap
below an image should create the need for so many solutions. A simple
'display: inline-block' should be all that were needed, but AFAIK: that
has no effect on images. Guess my old trick of coding to 'Strict' and
serve as 'Transitional' may work just as well, while we're waiting for
something more clever from the W3C and browsers.

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: