I have a problem with relative positioning, containing block,
and percentages.

I have an absolutely positioned outer DIV, and a relatively 
positioned inner DIV. My goal is to shift the inner DIV 
halfway to the left and up, using percentages. See code 
below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd";>
<html>
  <head>
    <meta http-equiv="Content-Type" 
      content="text/html; charset=ISO-8859-1">
    <title>title</title>
    <style type="text/css">
      body { margin: 50px; }
      div { border: 1px solid green; }
      div div { border: 1px dotted red; }
    </style>
  </head>
  <body>
    <div style="position: absolute;">
      <div style="position: relative; top: -50%; left: -50%;">
        Some multi-<br>
        line content
      </div>
    </div>
  </body>
</html>

My expectation is to see the text with the red border
shifted both up and left from the green (outer) box. In
standard browsers like Firefox and Opera I only get a shift
sideways and not upwards, though in IE I get both 
directions.

I have been trying to find support for the standard browsers'
behaviour in the CSS spec, but have failed. Sections 9.3.2,
10.6.4 and 10.6.7 suggest, at least to me, that I should be
getting the upwards shift with my layout.

Can anybody point to something that explains this? Did I miss
something in the spec or are both Firefox and Opera wrong
(not likely) ?

Best regards
Mike

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to