By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,379 Members | 1,380 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,379 IT Pros & Developers. It's quick & easy.

relative positioning inside absolute positioned element - who is right?

P: 8
I have a strange problem where it seems IE is doing the correct layout but Firefox and Safari isn't. I think I'm probably wrong, and there is something in the standards that say behaviour should be like Firefox does, but could someone tell me what is right?

In the below code I have element trees with three DIVs; the outer DIV establishes a positioning context and the "middle" DIV uses absolute positioning to put its top left corner in the center of the outer DIV. This works fine in all browsers.

Then I try to do relative positioning on the inner DIV with respect to the middle DIV. I try both moving up and left with percentages, which works fine in IE, but in Firefox/Safari it only gives an effect on moving left, not up.

Anybody can give me a clue why this happens?

Best regards
Mike


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5.         <title>title</title>
  6.         <style type="text/css">
  7.             div.outer {
  8.                 width: 200px;
  9.                 height: 100px;
  10.                 border: 1px solid black;
  11.                 position: relative;
  12.             }
  13.             div.middle {
  14.                 position: absolute;
  15.                 top: 50%;
  16.                 left: 50%;
  17.                 border: 1px dotted green;
  18.             }
  19.             div.inner {
  20.                 width: 70px;
  21.                 height: 20px;
  22.                 border: 1px solid red;
  23.                 text-align: center;
  24.                 position: relative;
  25.             }
  26.  
  27.             #horiz div.inner {
  28.                 left: -50%;
  29.             }
  30.             #vert div.inner {
  31.                 top: -50%;
  32.             }
  33.         </style>
  34.     </head>
  35.     <body>
  36.         <div id="horiz" class="outer">
  37.             <div class="middle">
  38.                 <div class="inner">Block</div>
  39.             </div>
  40.         </div>
  41.         <div id="vert" class="outer">
  42.             <div class="middle">
  43.                 <div class="inner">Block</div>
  44.             </div>
  45.         </div>
  46.     </body>
  47. </html>
  48.  
May 4 '07 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Firefox is going to be right but I don't see the problem right now. I'm assuming it will be something with the cascade of the attributes and how they are specified.

EDIT: In fact, just remove position:relative from .inner and it works. I'm distracted right now but that is establishing itself as a parent which is probably overriding #vert or somesuch. Just can't concentrate on it right now.
May 4 '07 #2

P: 8
I've struggled a bit more with this example and managed to boil it down to just this:

Expand|Select|Wrap|Line Numbers
  1. <div style="position: absolute;">
  2.   <div style="width: 70px; height: 20px; position: relative; top: -50%; left: -50%;"></div>
  3. </div>
So, I have an absolutely positioned outer DIV without explicit size, and a relatively positioned inner DIV with explicit size. My goal is to shift the inner DIV halfway to the left and up, using percentages.

Reasoning

This is my reasoning, that works for IE but obviously doesn't match with Firefox [see chapter references in CSS 2.1 http://www.w3.org/TR/CSS21]:

1) The outer DIV's width will be calculated using "shrink-to-fit" on its content [10.3.7] and its height will be calculated "based on content" [10.6.4 and 10.6.7].
->
The result can be verified by setting a border on the outer DIV and it will correctly get a size that encapsulates the unshifted inner DIV on both IE and Firefox. Thus, the outer DIV gets the calculated dimensions 20px * 70px on both browsers.

2) The inner DIV will relate to the outer DIV as "containing block" as the latter has established a positioning context due to its non-static position.

3) The top and left set to -50% on the inner DIV should shift the inner DIV 10px up and 35px left as the percentages should relate to the dimension of the outer DIV. [9.3.2]
->
On IE the "halfway shift" goes both up and left, but on Firefox only left.
If I explicitly assign the height 20px to the outer DIV, I get the upwards shift on Firefox also.

Result

It seems like Firefox is using a calculated dimension for left/right percentages, but not for top/bottom percentages. It also seems like this is contrary to the spec as [9.3.2] says that top percentages should refer to height of containing block.
Though, I highly suspect that there is something in the spec I am missing, as it would be unlikely that IE would follow the spec closer that Firefox in this case...
Any ideas?

> EDIT: In fact, just remove position:relative from .inner and it works. I'm
> distracted right now but that is establishing itself as a parent which is
> probably overriding #vert or somesuch. Just can't concentrate on it right now.

For me this just disables all halfway shifting (which renders the same in all browsers ;-). The previous example was a bit complex so I hope you wish to comment on my boiled-down version above.

Best regards
Mike
May 7 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
I am having a miserable day but I want to look into this. Maybe later.
May 7 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.