Re: [css-d] strict vs. transitional doctype and rendering differences

[Ingo Chao]

Thanks a lot, David, for this clarification, and for linking to the
discussion in #24186 (10 years ago!)

Thanks again to all who helped.

Ingo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[L. David Baron]

On Monday 2010-01-04 15:22 +0100, Ingo Chao wrote:
> In Strict mode, the red span encloses the text - in transitional mode,
> it dosn't.

What's happening here is that you have one inline-block within
another, and it is vertical-align:baseline.  However, you've set
line-height and height on the inner inline block so that its
baseline is actually below the bottom of the block.

In standards mode, Firefox follows the inline box model correctly,
and the line box in the outer inline-block includes both the extents
required by its font-size and line-height and (baseline-aligned to
those extents) the extents required by the inner inline-block:

 root inline box for outer . inner inline-block
12px font size . 48px line-height / 12px font-size / 24px height
   . ^
   . |
   . | 24px height affects inline box
   . | model outside it, but baseline
   . | is about 27px from the top
 ^ . |
 | . v
  __ | . __
 v .

In quirks mode and almost standards mode, we don't force the
inclusion in the inline box model of things that don't contain text
of their own, such as the root inline box (a.k.a. strut) for the
outer inline-block.

This is one of the quirks listed in
https://developer.mozilla.org/En/Mozilla_Quirks_Mode_Behavior
(created to fix bug 24186).

-David

-- 
L. David Baron http://dbaron.org/
Mozilla Corporation   http://www.mozilla.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[L. David Baron]

On Tuesday 2010-01-05 23:24 +1100, Alan Gresley wrote:
> Maybe transitional mode is showing pre Firefox 3 rendering. It was 
> Firefox 3 which first supported display: inline-block.
> 
> 

No, we (as for all browsers other than IE, I think) keep quirks vs.
standard differences to a very small set; new features are
introduced to both modes.

> So in transitional mode, both the  and  are possibly just 
> showing inline. Would using this be better.
> 
> display: -moz-inline-block;

No, it's not better.  It won't work on Firefox version 3 or newer.
(And it didn't work very well prior to 3, either.)

-David

-- 
L. David Baron http://dbaron.org/
Mozilla Corporation   http://www.mozilla.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[Bruno Fassino]

On Tue, Jan 5, 2010 at 1:21 PM, Philippe Wittenbergh  wrote:
>
> On Jan 5, 2010, at 5:53 PM, Ingo Chao wrote:
>
>> Thanks for the better reduction. In your first testcases,
>> http://dev.l-c-n.com/_temp/ib-strict.html
>> http://dev.l-c-n.com/_temp/ib-trans.html
>> the behavior differs when I add height:1em to the inner EM.
>
> Yes that is right, and what I would expect. If you add a letter/text
> string inside the , before the  in the transitional
> mode test, you'll see that the display stops differing.
>
> You can compare that to how, in transitional mode, a table-cell
> collapses completely around an image when there is no other
> (text-) content in the cell. In strict mode,  there will be a few
> pixels space at the bottom of the image/cell (room for
> descenders).


Yes, essentially what seems to happen is that in transitional (almost
standard) mode the outer inline-block shrink-wraps the inner one,
while in standard mode it has a minimum (line-)height, so when the
inner has a smaller height there is a difference in the rendering.
Here I made the inner one shorter with different methods (smaller
line-height, smaller font-size, smaller height) and in all cases there
is standard vs. transitional difference:
http://brunildo.org/test/ib-ib-trans.html
http://brunildo.org/test/ib-ib-strict.html
The recent versions of Firefox, Opera, Safari seem almost to agree,
and also IE8 is not much different.

As Philippe already mentioned Safari differs from the others when the
inner inline-block has an assigned height (much) less than its
line-height, and this is not related to transitional/standard (but
probably to the strangeness of an inline-block having the baseline of
its text outside the block itself...). This "complication" was present
in the original Ingo case.


Bruno

-- 
Bruno Fassino http://www.brunildo.org/test
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[Alan Gresley]

Ingo Chao wrote:
(snip)
> Thanks for the better reduction. In your first testcases,
> http://dev.l-c-n.com/_temp/ib-strict.html
> http://dev.l-c-n.com/_temp/ib-trans.html
> the behavior differs when I add height:1em to the inner EM.
> 
> best,
> Ingo


I'm late.


Maybe transitional mode is showing pre Firefox 3 rendering. It was 
Firefox 3 which first supported display: inline-block.



So in transitional mode, both the  and  are possibly just 
showing inline. Would using this be better.

display: -moz-inline-block;


-- 
Alan http://css-class.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[Philippe Wittenbergh]

On Jan 5, 2010, at 5:53 PM, Ingo Chao wrote:

> Thanks for the better reduction. In your first testcases,
> http://dev.l-c-n.com/_temp/ib-strict.html
> http://dev.l-c-n.com/_temp/ib-trans.html
> the behavior differs when I add height:1em to the inner EM.

Yes that is right, and what I would expect. If you add a letter/text string 
inside the , before the  in the transitional mode test, you'll see 
that the display stops differing.

You can compare that to how, in transitional mode, a table-cell collapses 
completely around an image when there is no other (text-) content in the cell. 
In strict mode,  there will be a few pixels space at the bottom of the 
image/cell (room for descenders).

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[Gabriele Romanato]

Honestly, I don't see the point in using a transitional DTD in order to use
an iframe. I stumbled on the same problem while developing a recent web site
that makes use of a Google Map. I decided to create the iframe through
JavaScript, providing a textual description of the map for assistive
technologies users.

Regards,
Gabriele

-- 
http://www.css-zibaldone.com/
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://dev.css-zibaldone.com/  (English)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[Ingo Chao]

2010/1/5 Philippe Wittenbergh :
>
> On Jan 5, 2010, at 3:06 PM, Ingo Chao wrote:
>
>> So it is an "almost standards mode" problem, triggered by the
>> transitional doctype [2]?
>>
>> The inner inline-block is sitting on a baseline in strict, and in
>> transitional, it doesn't [3].
>
> With both modes, the baseline for an inline-block is the baseline from the 
> parent line-box.
> http://dev.l-c-n.com/_temp/ib-strict.html
> http://dev.l-c-n.com/_temp/ib-trans.html
>
> Once you add your over-constrained construction, the behaviour differs. Bruno 
> is correct in identifying the presence of a line-box on the outer span as the 
> reason, I think. In transitional mode, that one line-box is not generated and 
> explains the different rendering.
> http://dev.l-c-n.com/_temp/ib-strict2.html
> http://dev.l-c-n.com/_temp/ib-trans2.html
>
>

Thanks for the better reduction. In your first testcases,
http://dev.l-c-n.com/_temp/ib-strict.html
http://dev.l-c-n.com/_temp/ib-trans.html
the behavior differs when I add height:1em to the inner EM.

best,
Ingo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[Philippe Wittenbergh]

On Jan 5, 2010, at 3:06 PM, Ingo Chao wrote:

> So it is an "almost standards mode" problem, triggered by the
> transitional doctype [2]?
> 
> The inner inline-block is sitting on a baseline in strict, and in
> transitional, it doesn't [3].

With both modes, the baseline for an inline-block is the baseline from the 
parent line-box.
http://dev.l-c-n.com/_temp/ib-strict.html
http://dev.l-c-n.com/_temp/ib-trans.html

Once you add your over-constrained construction, the behaviour differs. Bruno 
is correct in identifying the presence of a line-box on the outer span as the 
reason, I think. In transitional mode, that one line-box is not generated and 
explains the different rendering.
http://dev.l-c-n.com/_temp/ib-strict2.html
http://dev.l-c-n.com/_temp/ib-trans2.html


I think :-), i haven't used transitional mode for years.

PS - WebKit goes completely bonkers on the latter two test cases, even with a 
strict doctype

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[Ingo Chao]

2010/1/4 Bruno Fassino :
...
> I believe the difference in the rendering is related to the fact that
> in strict mode an element (in this case the red span) always generates
> an inline box (using its current font properties), like it always
> contained at least a character, even if it does not directly contain
> text.  Indeed adding a character
>  a Text
> the difference in the rendering disappear.
>
> This Mozilla page [1], rather old, does not mention other differences
> caused by the "almost standard" mode. And I assume that the one that
> it mentions is the same I tried to describe (probably in a rather
> imprecise way...)
>
>
> Bruno
>
> [1] 
> https://developer.mozilla.org/index.php?title=en/Gecko%27s_%22Almost_Standards%22_Mode

2010/1/4 Jukka K. Korpela :
...
> a) whether the differences in rendering really matter (and it's not just a
> matter of an obsession of having the same rendering in all browsers)


Thanks to all!

I was asking because of the transition from transitional to strict
(html5) doctype for an (iframed) site. These nested inline elements
are used as hooks for background-images/sprites, so exact matching
heights are critical. No big surprise that these fragile constructions
break sooner or later.

transitional
http://satzansatz.de/cssd/doctype/inlinetransitional.html

strict
http://satzansatz.de/cssd/doctype/inlinestrict.html

So it is an "almost standards mode" problem, triggered by the
transitional doctype [2]?

The inner inline-block is sitting on a baseline in strict, and in
transitional, it doesn't [3].

Great, thanks!
Ingo

[2] http://hsivonen.iki.fi/doctype/
[3] https://developer.mozilla.org/en/Images%2c_Tables%2c_and_Mysterious_Gaps
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[Bruno Fassino]

On Mon, Jan 4, 2010 at 3:22 PM, Ingo Chao  wrote:
>
> can someone point me to a reference about rendering differences
> between strict and transitional doctype?
>
> or: what would you expect?
>
[...]
>
> In Strict mode, the red span encloses the text - in transitional mode,
> it dosn't.
> Why?
>

I believe the difference in the rendering is related to the fact that
in strict mode an element (in this case the red span) always generates
an inline box (using its current font properties), like it always
contained at least a character, even if it does not directly contain
text.  Indeed adding a character
  a Text
the difference in the rendering disappear.

This Mozilla page [1], rather old, does not mention other differences
caused by the "almost standard" mode. And I assume that the one that
it mentions is the same I tried to describe (probably in a rather
imprecise way...)


Bruno

[1] 
https://developer.mozilla.org/index.php?title=en/Gecko%27s_%22Almost_Standards%22_Mode

-- 
Bruno Fassino http://www.brunildo.org/test
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strict vs. transitional doctype and rendering differences

[Bill Braun]

For starters...http://www.w3schools.com/tags/tag_doctype.asp.

Ingo Chao wrote:
> Hi
>
> can someone point me to a reference about rendering differences
> between strict and transitional doctype?
>
> or: what would you expect?
>
>
>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
> 
> 
>
> strict vs. transitional
>
> 
>   span {
>   background: red;
>   border: 1px solid black;
>   display: inline-block;
>   font-size: 12px;
>   padding: 0 2px;
>   }
>   em {
>   background: yellow;
>   display: inline-block;
>   font-style:normal;
>   height: 24px;
>   line-height:48px;
>   }
> 
> 
> 
>   Text
> 
> 
>
> In Strict mode, the red span encloses the text - in transitional mode,
> it dosn't.
> Why?
>
> thanks,
> Ingo
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>   

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] strict vs. transitional doctype and rendering differences

[Ingo Chao]

Hi

can someone point me to a reference about rendering differences
between strict and transitional doctype?

or: what would you expect?


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">



strict vs. transitional


span {
background: red;
border: 1px solid black;
display: inline-block;
font-size: 12px;
padding: 0 2px;
}
em {
background: yellow;
display: inline-block;
font-style:normal;
height: 24px;
line-height:48px;
}



Text



In Strict mode, the red span encloses the text - in transitional mode,
it dosn't.
Why?

thanks,
Ingo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/