[CSS21] 'position: relative' + 'left' and 'right'

• From: Christian Roth <roth@visualclick.de>
• Date: Thu, 27 Feb 2003 22:42:31 +0100
• To: "www-style Mailing List" <www-style@w3.org>
• Message-Id: <20030227214231.21667@mail.visualclick.de>

Hello,

I am unclear how the following is supposed to be rendered:

  <p><span>RELATIVE INLINE</span>A lot of dummy text. ... </p> 

given this stylesheet:

  p { font-size: 12pt; }
  span { position: relative; left: 4em; right: 4em; }

Assuming there is no implicit "mutually exclusive" restriction on using
'left' and 'right' at the same time (which I haven't found in the CSS21
specification), I'd assume that the two displacements ('4em' each) would
cancel out each other, so the display should be as if I had written

  span { position: static; }

However, all browsers [1] I tested the above on would displace the <span>
by 4em to the right (as if 'left' had some undocumented precedence over
'right').

Can you recommend a website that has graphical "should look like this"
examples, especially for all the more tricky combinations of 'position'/
'float'/'display' combinations?

- Christian

[1] Safari 1.0v60, IE 5.2.2 Mac, Mozilla 1.2.1 Mac, Opera 5.0 Mac

Received on Thursday, 27 February 2003 16:43:08 UTC