Re: top: 50%; position: relative; question

Gérard Talbot <newsblahgroup@xxxxxxxxxxx> wrote:

When trying this page

http://www.gtalbot.org/BrowserBugsSection/PercentualRelativePositioning.html

I get different rendered layouts with IE 6, IE 7 beta 2, Firefox 1.5.0.2
and Opera 9.0 build 8367.

Firefox 1.5 and Opera 9 will just ignore the CSS declaration
top: 50%; position: relative;

They don't.

IE 6 and IE 7 beta 2 position the red div at 50% of the height of the
body node.

What height? (you haven't specified one)

After carefully reading the CSS 2.1 spec, I wonder (am not sure)

- which browsers is right, which browser is wrong
- and why (in terms of the CSS 2.1 spec)

What do you think?

The basic 'Where Opera and Gecko agree and where IE renders differently,
IE is wrong' rule is as valid today as it ever was. IE '7' is still
years behind Opera and Gecko with regard to CSS compliance and feature
support.

A relatively positioned box is initially laid out as per normal flow,
and then offset as per it's box offset values.
http://www.w3.org/TR/CSS21/visuren.html#relative-positioning

Percentage values for the 'top' property are relative to the containing
block.
http://www.w3.org/TR/CSS21/visuren.html#position-props
http://www.w3.org/TR/CSS21/visuren.html#containing-block

In this case the containing block is the initial containing block
http://www.w3.org/TR/CSS21/visudet.html

In this case the containing block has no specified height, thus the
computed height resolves to 'auto'.
http://www.w3.org/TR/CSS21/visudet.html#the-height-property

--
Spartanicus
.

Relevant Pages

  • Images with captions centered?
    ... get some input from anyone more skilled with CSS than I am. ... display *centered* and with the possibility of different image sizes (ALA ... fails totally in FF and MSIE, who just displays the images one below the ... I guess Opera is the only browser ...
    (comp.infosystems.www.authoring.stylesheets)
  • getComputedStyle, where is my LI?
    ... Opera 10.1 has a buggy implementation of getComputedStyle top. ... Definitions of "absolute value" changed from CSS 2 to CSS 2.1. ... If the API design is such a problem, ... and 'bottom' moves them up. ...
    (comp.lang.javascript)
  • Re: images and before/after
    ... Yes, that would be more accurate, but there is a long tradition in CSS in misnaming properties, values, and selectors. ... at least Firefox and Opera have different interpretations. ... This specification does not fully define the interaction of:before and:after with replaced elements. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: specify language as in ?
    ... Opera on WinNT supports a good portion and useful set of ... You mean the CSS 2.0 aural style sheet properties, ... like intranets where Opera is used for this very ... CSS properties & values not supported by other main browsers. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: top: 50%; position: relative; question
    ... Firefox 1.5 and Opera 9 will just ignore the CSS declaration ... which browsers is right, which browser is wrong ... and then offset as per it's box offset values. ...
    (comp.infosystems.www.authoring.stylesheets)