vertical-align and line-height

This may have been discussed before, but I haven't found any 
satisfactory explanations in the archives, so please forgive me for 
reposting if this has indeed already been discussed. It's my first 
posting and haven't enlisted to this list before.

I'm trying to understand section 10.8.1 in CSS 2.1. Actually, I think I 
understand it and looking at some samples in IE7, I get the result I 
expect. However, I'm getting a consistent different result in Opera 
9.93, Firefox 3.1 and Safari 3.2.2. Something is afoot...

Consider this html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style>
      div {background-color:#ccc; margin-bottom:4px}
      div * {vertical-align:text-bottom}
      div span {background-color:red}
    </style>
  </head>
  <body>
    <div>
      <span style="font-size:15px">small</span>
      <span style="font-size:30px">BIG</span>
    </div>
    <div style="line-height:100px">
      <span style="font-size:15px">small</span>
      <span style="font-size:30px">BIG</span>
    </div>
    <div style="height:100px">
      <span style="font-size:15px">small</span>
      <span style="font-size:30px">BIG</span>
    </div>
  </body>
</html>
 

There are three block elements, formatted with an explicit height, 
line-height and implicitly height through child elements. The children 
are all inline elements with the vertical-align property set to text-bottom.

I get the exact same result in IE and Safari, and I get the same but 
different result in Firefox and Opera. I do get quite different results 
in the browsers if I change text-bottom as well (e.g. Safari behaves 
like Firexfox and Opera if I set vertical-align to bottom).

I don't understand how the height of the single line is being computed 
for the middle block element in Firefox and Opera. I would expect it to 
be 100px, since none of the inline elements are taller than that. 
However, I get a taller block in Firefox and Opera. I can also see that 
there is actually two line boxes if I select the text in the browser. I 
only expect one.

Second mystery is that the text is not being text-bottom aligned in 
Firefox and Opera for the middle case. Intuitively, I wouldn't expect 
setting the line-height to affect the vertical alignment. I would expect 
case 2 and 3 to give the same result.

 From the CSS 2.1 spect, I would expect the Safari and IE result. My 
understanding is that the block contains a single line, in turn 
containing three inline elements (two spans and an anonymous element for 
the spaces, with the leading and trailing spaces being ignored according 
to the SGML (iso8879 section 7.6.1)). Further more, I would expect the 
height of the inline boxes and thus the line box to be bound by the 
line-height. Also, I would expect the extra height introduced by the 
line-height to be evenly distributed above and below the inlines and for 
the inlines to be bottom aligned. Apparently, something else/more is 
going on.

I'd appreciate some insight into how this works. What am I missing.

    * Why is the middle block taller than the line-height in some of the
      browsers?
    * Why isn't the text bottom aligned in some of the browser?
    * Which behavior is correct? Is this an ambiguous case? Why?

I'd much appreciate your wisdom!

-- 
Regards,
Em2 Solutions AB
Michael Jansson

Received on Thursday, 26 February 2009 16:31:33 UTC