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

8892

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 Become a Cyber Security Engineer

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

Security

Access Europe meeting on Wed 2 August - An Access Developer Guide to creating applications in Blazor

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

Microsoft Access / VBA

How to Use CodiumAI's pr-agent?

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

General

Speedup your spring application

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

General

Cancel Print Action if Sub form has No Records

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

Microsoft Access / VBA

Python code for finding the longest common subsequence

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

Python

How does React native implement an English player?

by: lllomh | last post by:

How does React native implement an English player?

Mobile Development

How to calculate date of retirement from date of birth

by: Mushico | last post by:

How to calculate date of retirement from date of birth

Data Management

Windows 11 and Access Combo Box Issue

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

Microsoft Access / VBA