Previous Message
Next Message

Vertical align in Mozilla

Sent by Michael Landis on 25 January 2004 22:10


Skip wrote (about http://www.boisestate.edu/courses/reformation/admin/):

> The text for the footer fall in the right place in Internet
> Explorer--between the top and bottom border lines. But in Mozilla
> 1.5, the text falls *below* the bottom border line.

<snip />

> One wonders what I'm missing, one surely does.

One needs wonder no more! (Sorry, couldn't resist responding to your
sign-off. :)

Actually, I don't really know why this isn't working exactly as you intend,
as your heights seem to match up. To be safe, however, I'd suggest avoiding
relying on heights to align components, since you never know when rounding
errors will cause problems.

Currently, IE is doing what you want because IE doesn't let floated
elements extend below their containers, although the specs clearly state
that floated elements are taken out of the document flow, and therefore
should be able to poke out of the bottom of the containing box.[1] If you
take the height off of the footer div, you'll see that Mozilla properly
closes up space as if the floats don't exist.

To ensure that your footer content stays within the footer, you can float
the footer itself, too, and give it a 100% width. According to the CSS 2.1
candidate recommendation specs[2], floated elements should contain any
floats within them. Fortunately, all 5.x+ browsers obey this condition
already. This ensures that the content stays within the footer, without
needing a specific height.

HTH,

MikeL

[1] http://www.w3.org/TR/REC-CSS2/visuren.html#floats
[2]http://www.w3.org/TR/CSS21/visudet.html#q22

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message