472,780 Members | 2,093 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,780 software developers and data experts.

relative positioning inside absolute positioned element - who is right?

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

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.             }
  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>
May 4 '07 #1
3 8892
7,435 Expert 4TB
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
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.


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.


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
May 7 '07 #3
7,435 Expert 4TB
I am having a miserable day but I want to look into this. Maybe later.
May 7 '07 #4

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

Similar topics

by: Ken Kast | last post by:
Here's my situation. I have a statically positioned table that has an image in a cell. I also have some layers, defined by absolute-positioned DIVs for some animation. Everything works until I...
by: Catherine Lynn Wood | last post by:
I need to know how to overlap DIV content within 'relative' associated rendering. I am building div layers in the middle of a page and when I set positioning to absolute in the CSS, it references...
by: louissan | last post by:
Hi all, I've met a problem with Opera and its ability to render absolutely positioned divs inside relatively positioned parent blocks, themselves contained inside a relatively positioned...
by: Asad | last post by:
Hi, I am basically trying to accomplish drop down menus for navigation on a site. And I'm pretty much done except I am having one problem. The z-index is not working with relative positioning! ...
by: Markus Ernst | last post by:
Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following...
by: themf | last post by:
Hi, I'm trying to make a page that will become a part of another page, ie. included in the HTML at a particular point. How do I do this so all the stuff inside MY page remains intact, relative...
by: Rob R. Ainscough | last post by:
I'm slowly (very slowly) working my way thru the bizarre and sadistic world of control positioning in MultiViews (ASP 2.0). I came across this to help me explain (or attempt to anyway) why my web...
by: nonsensitor | last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out. The first problem is...
by: Cruelemort | last post by:
All, I have a div in my page that has a set width of 1000px, height of 200px, inside this i declare two more div's, both relatively positioned and floated left, the first is placed to the top...
by: Rina0 | last post by:
Cybersecurity engineering is a specialized field that focuses on the design, development, and implementation of systems, processes, and technologies that protect against cyber threats and...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
by: lllomh | last post by:
How does React native implement an English player?
by: Mushico | last post by:
How to calculate date of retirement from date of birth
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.