Sent by Rijk van Geijtenbeek on 20 March 2002 05:05
On Wednesday, March 20, 2002, Srinivasan wrote:
> I have the following simple html test case.
> The output on IE 4.0 and Opera 6.01 is different.
Which is the effect you'd like to see? Just to keep the discussion
practical. The linebox-model is hard to grasp, even for implementors.
> The "Submit Button:" text and the Submit button are aligned ok,
> but the "Sample Text" is different.
> In Opera, the "Sample Text" is looks "pushed down". why?
The CSS2 specs says about the value 'bottom':
"Align the bottom of the box with the bottom of the line box."
The line box is enlarged, as the span contains larger text.
The first words and the submit button do not have the property
'text-align' set, so it's hard to tell how they should be positioned
inside the line box that is to large for them. Maybe Eric can tell us
how to interpret the default value.
IMO, it makes more sense to set 'vertical-align' for the elements that
are smaller than the line box. The current example doesn't look good
in any of my browsers here: IE6, Opera 6.01 and Mozilla .9.9
See this screenshot of the example in those three browsers:
http://rijk.op.het.net/tmp/vertical-align.png
I selected a part of the text in all browsers, so you get an
improssion of the dimension of the line boxes. IE 6 and Opera 6 behave
exactly the same. Mozilla aligns all parts to the bottom of the
line-box.
> Which is correct (opera or IE)?
> <html>
> <body>
> <p>
> Submit Button:
> <input type=submit></input>
> <span style="font-size:24pt; vertical-align: bottom">
> Sample Text
> </span>
> </p>
> </body>
> </html>
The inclusion of the submit button has no effect on the alignment of
the other two parts:
http://rijk.op.het.net/tmp/vertical-align2.png
If I just remove the vertical align from the SPAN, the display is fine
in all three browsers here:
http://rijk.op.het.net/tmp/vertical-align3.png
Greetings,
Rijk [EMAIL-REMOVED]
(Opera Software employee)
Mot du Jour:
The mind is like a parachute - it works only when open.
