Bruno Fassino wrote:
>Zoe M. Gillenwater wrote:
>> ... appears to be a vertical-align issue. Adding
>> vertical-align: top to #inputcontainer fixes it.
>> Still don't understand what was going on though -- it was obviously not
>> aligning to the middle, and without the image in the other "cell" it had
>> no problem aligning to the top.
>The vertical-align value was probably "baseline", which may explain why the
>aligment in one cell depended on the other cells contents. Indeed it is
>based on the "row baseline"
><http://www.w3.org/TR/CSS21/tables.html#height-layout>, which may be
>affected by all the cells in the same row.
This sounds like a good explanation, but does not completely suffice
to explain Mozilla/Safari behavior. Try playing with the font sizes
in the two divs using display: table-cell and you'll see that the
alignment isn't really set to the baseline. If the first element has
a very large font-size, the second element appears to align the text
*top* to the bottom of the first element's text baseline. This is
already non-compliant, as far as I can see. Even more strangely, if
you incrementally increase the font-size in the second element,
you'll see that the alignment of the top moves up past the apparent
I can't get this behavior to line up with what is described in the spec.
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/