473,543 Members | 2,451 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

top: 50%; position: relative; question

Hello fellow stylers,

When trying this page

http://www.gtalbot.org/BrowserBugsSe...sitioning.html

I get different rendered layouts with IE 6, IE 7 beta 2, Firefox 1.5.0.2
and Opera 9.0 build 8367.

Firefox 1.5 and Opera 9 will just ignore the CSS declaration
top: 50%; position: relative;

IE 6 and IE 7 beta 2 position the red div at 50% of the height of the
body node.

After carefully reading the CSS 2.1 spec, I wonder (am not sure)

- which browsers is right, which browser is wrong
- and why (in terms of the CSS 2.1 spec)

What do you think?

Gérard
--
remove blah to email me
Apr 18 '06 #1
6 6065
Els
Gérard Talbot wrote:

http://www.gtalbot.org/BrowserBugsSe...sitioning.html

I get different rendered layouts with IE 6, IE 7 beta 2, Firefox 1.5.0.2
and Opera 9.0 build 8367.

Firefox 1.5 and Opera 9 will just ignore the CSS declaration
top: 50%; position: relative;
Maybe they can't figure out of which you want it to calculate 50%.
IE 6 and IE 7 beta 2 position the red div at 50% of the height of the
body node.
So I think they're wrong, and just try to please you :-)
After carefully reading the CSS 2.1 spec,
Which section? Got a url?
I wonder (am not sure)

- which browsers is right, which browser is wrong
- and why (in terms of the CSS 2.1 spec)

What do you think?


What I think? I think you're mistaking position:relati ve for
position:absolu te.
The fact that you mention which element is "its nearest block-level
ancestor box" confirms that thought.

position:relati ve means relative to its own original position.
If you want it to be positioned at 50% of the height of body, then you
need position:absolu te, which is relative to the first positioned
ancestor.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Yes - Ritual [live][Symphonic Tour]
Apr 18 '06 #2
Els wrote :
Gérard Talbot wrote:

http://www.gtalbot.org/BrowserBugsSe...sitioning.html

I get different rendered layouts with IE 6, IE 7 beta 2, Firefox 1.5.0.2
and Opera 9.0 build 8367.

Firefox 1.5 and Opera 9 will just ignore the CSS declaration
top: 50%; position: relative;
Maybe they can't figure out of which you want it to calculate 50%.
IE 6 and IE 7 beta 2 position the red div at 50% of the height of the
body node.


So I think they're wrong, and just try to please you :-)


You think. I think. What matters, I'd say, is what the spec has
provided, give, etc.
After carefully reading the CSS 2.1 spec,


Which section? Got a url?


Here's my line of reasoning based on CSS 2.1

http://www.w3.org/TR/2006/WD-CSS21-20060411/

Section 9.3.2 on Box offsets: 'top', 'right', 'bottom', 'left'
http://www.w3.org/TR/2006/WD-CSS21-2...position-props
says:
"Top
Percentages: refer to height of containing block"

What's containing block and how is it defined for relatively positioned
elements?

Section 10.1
10.1 Definition of "containing block"
http://www.w3.org/TR/2006/WD-CSS21-2...-block-details
says
"if the element's position is 'relative' or 'static', the containing
block is formed by the content edge of the nearest block-level, table
cell or inline-block ancestor box."

So 50% should be 50% of the body element's height.

10.6 Calculating heights and margins
10.6.3 Block-level non-replaced elements in normal flow when 'overflow'
computes to 'visible'
http://www.w3.org/TR/2006/WD-CSS21-2...l#normal-block
says

"If it has block-level children, the height is the distance between the
top border-edge of the topmost block-level child box that doesn't have
margins collapsed through it and the bottom border-edge of the
bottommost block-level child box that doesn't have margins collapsed
through it."

So, logically, the top: 50% should be 50% of the document.body.s crollHeight
In the testpage, you can see that value at the bottom of the page.

I wonder (am not sure)

- which browsers is right, which browser is wrong
- and why (in terms of the CSS 2.1 spec)

What do you think?


What I think? I think you're mistaking position:relati ve for
position:absolu te.
The fact that you mention which element is "its nearest block-level
ancestor box" confirms that thought.


I was merely stating word for word what CSS 2.1 spec was saying and how
it was saying it in section 10.1:

"if the element's position is 'relative', [then] the containing block is
formed by the content edge of the nearest block-level ancestor box."
position:relati ve means relative to its own original position.
If you want it to be positioned at 50% of the height of body, then you
need position:absolu te, which is relative to the first positioned
ancestor.


No. I think you're the one getting it wrong. With position: absolute,
the red div would be positioned at 50% of the height of the initial
containing block which is, by definition, a rectangle with the
dimensions of the viewport.
You need to read carefully section 10.1 on this.

Gérard
--
remove blah to email me
Apr 18 '06 #3
Els wrote :
Gérard Talbot wrote:
What I think? I think you're mistaking position:relati ve for
position:absolu te.
The fact that you mention which element is "its nearest block-level
ancestor box" confirms that thought.

position:relati ve means relative to its own original position.
If you want it to be positioned at 50% of the height of body, then you
need position:absolu te, which is relative to the first positioned
ancestor.


Try this:

http://www.gtalbot.org/DHTMLSection/Positioning.html

Choose Blue box, position absolute, 50 and % . Firefox 1.5.0.2, NS 8.1
(with rv:1.7.5 Gecko/20060111 rendering engine), IE 7 and Seamonkey 1.5a
all position the blue div at 50% of the height of the viewport. Only
Opera 9 build 8367 positions (wrongly IMO) at 50% of the document
scrollview, whole view.

Gérard
--
remove blah to email me
Apr 18 '06 #4
On 18/04/2006 19:38, Gérard Talbot wrote:

[snip]
Section 9.3.2 on Box offsets: 'top', 'right', 'bottom', 'left'
http://www.w3.org/TR/2006/WD-CSS21-2...position-props
says:
"Top
Percentages: refer to height of containing block"


You must keep in mind that the definition in CSS 2 has a very relevant
condition that seems to have been relaxed in 2.1: the height property of
the containing block must have an explicit value. Under these same
rules, the containing block will be the body element as the nearest
block-level ancestor, and that element has a height property value of
'auto'.

It would appear that here, both Firefox and Opera are implementing CSS
2. As a result, the top property value becomes 'auto'.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Apr 18 '06 #5
Gérard Talbot <ne***********@ gtalbot.org> wrote:
When trying this page

http://www.gtalbot.org/BrowserBugsSe...sitioning.html

I get different rendered layouts with IE 6, IE 7 beta 2, Firefox 1.5.0.2
and Opera 9.0 build 8367.

Firefox 1.5 and Opera 9 will just ignore the CSS declaration
top: 50%; position: relative;
They don't.
IE 6 and IE 7 beta 2 position the red div at 50% of the height of the
body node.
What height? (you haven't specified one)
After carefully reading the CSS 2.1 spec, I wonder (am not sure)

- which browsers is right, which browser is wrong
- and why (in terms of the CSS 2.1 spec)

What do you think?


The basic 'Where Opera and Gecko agree and where IE renders differently,
IE is wrong' rule is as valid today as it ever was. IE '7' is still
years behind Opera and Gecko with regard to CSS compliance and feature
support.

A relatively positioned box is initially laid out as per normal flow,
and then offset as per it's box offset values.
http://www.w3.org/TR/CSS21/visuren.h...ve-positioning

Percentage values for the 'top' property are relative to the containing
block.
http://www.w3.org/TR/CSS21/visuren.html#position-props
http://www.w3.org/TR/CSS21/visuren.h...ntaining-block

In this case the containing block is the initial containing block
http://www.w3.org/TR/CSS21/visudet.html

In this case the containing block has no specified height, thus the
computed height resolves to 'auto'.
http://www.w3.org/TR/CSS21/visudet.h...eight-property

--
Spartanicus
Apr 18 '06 #6
Spartanicus wrote :
Gérard Talbot <ne***********@ gtalbot.org> wrote:
When trying this page

http://www.gtalbot.org/BrowserBugsSe...sitioning.html

I get different rendered layouts with IE 6, IE 7 beta 2, Firefox 1.5.0.2
and Opera 9.0 build 8367.

Firefox 1.5 and Opera 9 will just ignore the CSS declaration
top: 50%; position: relative;
They don't.
IE 6 and IE 7 beta 2 position the red div at 50% of the height of the
body node.


What height? (you haven't specified one)
After carefully reading the CSS 2.1 spec, I wonder (am not sure)

- which browsers is right, which browser is wrong
- and why (in terms of the CSS 2.1 spec)

What do you think?


The basic 'Where Opera and Gecko agree and where IE renders differently,
IE is wrong' rule is as valid today as it ever was. IE '7' is still
years behind Opera and Gecko with regard to CSS compliance and feature
support.

A relatively positioned box is initially laid out as per normal flow,
and then offset as per it's box offset values.
http://www.w3.org/TR/CSS21/visuren.h...ve-positioning

Percentage values for the 'top' property are relative to the containing
block.
http://www.w3.org/TR/CSS21/visuren.html#position-props
http://www.w3.org/TR/CSS21/visuren.h...ntaining-block

In this case the containing block is the initial containing block
http://www.w3.org/TR/CSS21/visudet.html


Right. I got it all up to there.
In this case the containing block has no specified height, thus the
computed height resolves to 'auto'.
http://www.w3.org/TR/CSS21/visudet.h...eight-property


You and M. Winter got the bit I was missing
"If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not absolutely
positioned, [then] the value computes to 'auto'."

Thanks

Gérard
--
remove blah to email me
Apr 18 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2775
by: waste | last post by:
Hello! This simple code won't work with IE. Can somebody iluminate me: why? Is it IE bug? I write it to gain possibility to move a layer (with JavaScreipt), but only within a parent (not position:absolute) layer. Or maybe there is a better way than a position:relative to do it? <div style="width:100px; height:50px; border:4px solid red;...
3
19752
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
2
3859
by: Martin Geisler | last post by:
-----BEGIN PGP SIGNATURE----- Version: GnuPG v1.4.1 (GNU/Linux) iD8DBQBDNmLx6nfwy35F3TgRAtjIAJ9ryEjr0kaaEapRD0z1bHQYmKi+1wCdEOZC /wY2033SyIVl0za07v8RMkk= =6BZ+ -----END PGP SIGNATURE-----
2
1697
by: deko | last post by:
I'm getting some funny behavior in IE (fine in FF and Opera) with a table (logtable) that is supposed to be 1000px wide within a div (log) that is supposed to be 100% of it's parent container (stats) which is supposed to have 8% margin right and left. What is happening is that the 8% margin on the right is being ignored. But as soon as you...
3
2992
by: rsrimantula | last post by:
I have a table with html code <style> div.scroll { height:150px; overflow:auto; } table.scrollable th { position:relative;
2
5348
by: drillbatting | last post by:
Hi, I have a site with a heap of small menus in various elements. It looks something like this (inline style's etc for readability): <div>
10
3246
by: Mark | last post by:
According to my book on CSS, if you apply 'position: relative' to a block-level element, it will stay exactly where it is. However, you can then use top, left etc. to offset the element relative to its position. However, looking at other people's stylesheets, I often see 'position: relative' applied to elements but without the use of top,...
0
1433
by: cook | last post by:
Hi at all Please take a look at this little source code First I have a full screen image Then immediately after the copyright into a div that must be into the image like written at the image bottom It work best with MSIE but with FF copyright is after the image and not on
8
7027
by: muiz123 | last post by:
I study http://www.javascripttoolbox.com/lib/objectposition/index.php source and its doesn't work fine for the following code: (I hope both IE and firefox are working well) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>Test</title> <meta http-equiv="Content-Type"...
0
7399
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...
0
7584
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. ...
0
7729
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
5880
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...
1
5258
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...
0
4884
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3385
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...
1
952
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
626
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...

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.