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
Mike

Expand|Select|Wrap|Line Numbers

 <!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">

            div.outer {

                width: 200px;

                height: 100px;

                border: 1px solid black;

                position: relative;

            }

            div.middle {

                position: absolute;

                top: 50%;

                left: 50%;

                border: 1px dotted green;

            }

            div.inner {

                width: 70px;

                height: 20px;

                border: 1px solid red;

                text-align: center;

                position: relative;

            }
 
            #horiz div.inner {

                left: -50%;

            }

            #vert div.inner {

                top: -50%;

            }

        </style>

    </head>

    <body>

        <div id="horiz" class="outer">

            <div class="middle">

                <div class="inner">Block</div>

            </div>

        </div>

        <div id="vert" class="outer">

            <div class="middle">

                <div class="inner">Block</div>

            </div>

        </div>

    </body>

</html>

May 4 '07 #1

Subscribe Post Reply

8948

drhowarddrfine

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

mikewse

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

Expand|Select|Wrap|Line Numbers

 <div style="position: absolute;">

  <div style="width: 70px; height: 20px; position: relative; top: -50%; left: -50%;"></div>

</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

7,435

Expert 4TB

I am having a miserable day but I want to look into this. Maybe later.

May 7 '07 #4

Similar topics

Relative Absolute Position

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...

Javascript

overlapping layers relative to interior page content

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...

HTML / CSS

Opera relative and absolute positioning

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...

HTML / CSS

Z-Index not working with Relative Positioning

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! ...

HTML / CSS

Position relative to parent element

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...

HTML / CSS

Positioning of stuff in a relative way

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...

HTML / CSS

absolute, relative, not set, static positioning ??????

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...

ASP.NET

Absolute positioning not relative to containing element?

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...

HTML / CSS

Overlap relative positioned div's

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...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

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,...

General

Problem With Comparison Operator <=> in G++

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,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

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...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

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,...

Career Advice