Opera div height bug

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > Opera div height bug

This is Interesting: Free Magazines for Graphics designers and webmasters

Pages (2): [1] 2 »

Last Thread Next Thread

Author

Thread

Opera div height bug

Francois du Toit

09-14-05 - 12:46 AM

Can someone confirm this:
http://www.purpleray.za.net/opera_bug.html

[ Post Follow-Up to this message ]

Re: Opera div height bug

Spartanicus

09-14-05 - 12:47 AM

"Francois du Toit" <francoisdutoit@XXXXXXXXXX> wrote:

>Can someone confirm this:
>http://www.purpleray.za.net/opera_bug.html

The containing block for div.l is div.bug (*not* div.h since it's
position is static), but div.bug has a height of 100%, which doesn't
compute to a defined height in your example.

I'd file a bug @ Mozilla.

--
Spartanicus

[ Post Follow-Up to this message ]

Re: Opera div height bug

Francois du Toit

09-14-05 - 12:47 AM

Ok I think I see what you're saying, but what about this:

In opera you get a red block - and in firefox a blue block. Shouldn't
div.l inherit the height from div.h ?

<style type="text/css"><!--
div.rel {
background-color: red;
position: relative;
left: 10px;
top: 10px;
width: 50%;
}

div.h {
height: 100px;
width: 100%;
}

div.l {
width: 100%;
height: 100%;
background-color: blue;
position: absolute;
left: 0px;
top: 0px;
}

--></style>
</head>
<body>

<div class="rel">
<div class="h">
<div class="l"></div>
</div>
</div>

</body>
</html>

[ Post Follow-Up to this message ]

Re: Opera div height bug

Spartanicus

09-14-05 - 12:47 AM

"Francois du Toit" <francoisdutoit@XXXXXXXXXX> wrote:

>Ok I think I see what you're saying, but what about this:
>
>In opera you get a red block - and in firefox a blue block. Shouldn't
>div.l inherit the height from div.h ?

No, same reason as with the other example.

--
Spartanicus

[ Post Follow-Up to this message ]

Re: Opera div height bug

Francois du Toit

09-15-05 - 12:53 AM

Ok this did not make sence at first, but this is how I understand it
now. ;)
Refering to my first example (
http://www.purpleray.za.net/opera_bug.html  )

The height is not inherited as you said, I misunderstood that. But
according to the specs from
http://www.w3.org/TR/REC-CSS2/visud...height-property :

<percentage>
Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), the value is interpreted like 'auto'.

and from
http://www.w3.org/TR/REC-CSS2/visud...g-block-details :

If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a 'position' other than
'static', in the following way:

So as I understand it - div.l should get it's height from the
containing block established by div.bug and not div.h because div.h is
static.
div.bug's height is a percentage value - but since it's containing
block is not specified it should get it's height from it's content
(like auto).

It seems to me that opera computes the height for div.l from div.l's
content because it's containing block is not specified (div.bug has a
percentage value).
Firefox computes the height for div.l from the containing block of
div.bug. Although it is not specified, it does have a height that it
gets from it's content.

[ Post Follow-Up to this message ]

Re: Opera div height bug

Spartanicus

09-15-05 - 12:53 AM

"Francois du Toit" <francoisdutoit@XXXXXXXXXX> wrote:

>It seems to me that opera computes the height for div.l from div.l's
>content because it's containing block is not specified (div.bug has a
>percentage value).

Correct, Opera does the right thing here.

>Firefox computes the height for div.l from the containing block of
>div.bug. Although it is not specified, it does have a height that it
>gets from it's content.

And it's not supposed to do that, Firefox gets this wrong.

--
Spartanicus

[ Post Follow-Up to this message ]

Re: Opera div height bug

Francois du Toit

09-15-05 - 12:54 AM

From:
http://www.w3.org/TR/REC-CSS2/visud...g-block-details

If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a 'position' other than
'static', in the following way:
1. In the case that the ancestor is block-level, the containing
block is formed by the padding edge of the ancestor.

So I think firefox follows the CSS spec correctly.

More here also:
http://archivist.incutio.com/viewlist/css-discuss/55984

[ Post Follow-Up to this message ]

Re: Opera div height bug

Spartanicus

09-15-05 - 12:54 AM

"Francois du Toit" <francoisdutoit@XXXXXXXXXX> wrote:

>From:
>http://www.w3.org/TR/REC-CSS2/visud...g-block-details

CSS 2.0 has effectively been obsoleted, use the 2.1 spec. instead.

>If the element has 'position: absolute', the containing block is
>established by the nearest ancestor with a 'position' other than
>'static', in the following way:
>   1. In the case that the ancestor is block-level, the containing
>block is formed by the padding edge of the ancestor.
>
>So I think firefox follows the CSS spec correctly.

You've not presented an argument that would support this conclusion, the
sections that you've quoted from the spec support that Opera is doing
the right thing.

If the height of the ancestor of an absolutely positioned box with
height:100% is undefined, then the height of the absolutely positioned
box is also undefined and resolves to auto, 100% of undefined is
undefined.

The fact that there is another box in between these two boxes with a
defined height as in your example is irrelevant since it's not the
containing block for the absolutely positioned element.

--
Spartanicus

[ Post Follow-Up to this message ]

Re: Opera div height bug

Francois du Toit

09-15-05 - 04:21 AM

I changed the page a bit to make the problem clearer I hope.

The 2.1 spec says roughly the same thing as 2.
http://www.w3.org/TR/CSS21/visudet....g-block-details

If the element (div.l) has 'position: absolute', the containing block
is established by the nearest ancestor (div.bug) with a 'position' of
'absolute', 'relative' or 'fixed', which is the padding edge of the
ancestor (if it is block-level).

The padding edge of div.bug has a border in my example. This should
also be the containing block for div.l .

[ Post Follow-Up to this message ]

Re: Opera div height bug

G�rard Talbot

09-15-05 - 09:26 AM

Francois du Toit a �crit :
> Ok this did not make sence at first, but this is how I understand it
> now. ;)
> Refering to my first example (
> http://www.purpleray.za.net/opera_bug.html  )
>
> The height is not inherited as you said, I misunderstood that. But
> according to the specs from
> http://www.w3.org/TR/REC-CSS2/visud...height-property :
>
> <percentage>
>     Specifies a percentage height. The percentage is calculated with
> respect to the height of the generated box's containing block. If the
> height of the containing block is not specified explicitly (i.e., it
> depends on content height), the value is interpreted like 'auto'.
>
> and from
> http://www.w3.org/TR/REC-CSS2/visud...g-block-details :
>
> If the element has 'position: absolute', the containing block is
> established by the nearest ancestor with a 'position' other than
> 'static', in the following way:
>
> So as I understand it - div.l should get it's height from the
> containing block established by div.bug and not div.h because div.h is
> static.
> div.bug's height is a percentage value - but since it's containing
> block is not specified it should get it's height from it's content
> (like auto).
>
> It seems to me that opera computes the height for div.l from div.l's
> content because it's containing block is not specified (div.bug has a
> percentage value).
> Firefox computes the height for div.l from the containing block of
> div.bug. Although it is not specified, it does have a height that it
> gets from it's content.
>

Opera has had that bug since Opera 7.0 beta 1, some 34 months ago. The
bugfile number is 123305 in Opera's BTS.

G�rard
--
remove blah to email me

[ Post Follow-Up to this message ]