473,726 Members | 2,142 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

relative positioning inside absolute positioned element - who is right?

8 New Member
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
3 8976
drhowarddrfine
7,435 Recognized Expert Expert
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:relati ve 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
mikewse
8 New Member
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:relati ve 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
7,435 Recognized Expert Expert
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

4
11018
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 scroll/resize. Then the image "moves" on the screen but the animation doesn't. The net effect is that their relative positioning changes. I'd like to have it be that they would stay in the same relative position. I want to keep the image as an...
2
12036
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 back to 0,0 on the entire page. If I set it to relative, the div layers will not overlap as needed. I prefer to avoid javascripting an 'innerHTML' re-write of a single div and would instead like to build two layers that can reside at the same...
4
8736
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 block. I'm surely missing something, but what? Any help would be kindly appreciated :) Here's a code sample:
8
42519
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! Basically I have a page such as this: http://members.rogers.com/asadkhan2/prob2.jpg
3
19779
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 test case element1 and element2 should be placed side by side inside a centered white container element: http://www.markusernst.ch/test.htm
1
1553
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 to each other, that is, since a lot of the stuff is absolute positioned, if I say that flower.jpg is at (200,300), it shows up at (200,300) in the -complete- page instead of in the little bit that is MY page. How do I define a separate (0,0) for...
2
2507
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 page controls were all over the place. "Ironically, absolute positioning is relative. Yes, you read that right. An absolutely positioned element is positioned relative to another element, called the containing block. Here comes the definition...
2
3164
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 that I would like to display some text on top of an image within the header. I've tried using absolute positioning to specify where the phone number should appear in relation to the parent div (#header). However the text appears to be positioned in...
7
9303
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 left of the box and is a 30px square, the other one is set to 970px and is naturally positioned next to the square and so fills all the way to the right hand edge of the box. Now i need the second (wider) box to overlap the square and so start
0
8890
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8752
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9402
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9182
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8101
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6702
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4521
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3228
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2157
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.