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 6  6074 
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]
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
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
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.
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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;
overflow:hidden">
<div style="position:relative; width:80px; height:200px; border:4px
solid green;">
|
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
|
by: Martin Geisler |
last post by:
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.1 (GNU/Linux)
iD8DBQBDNmLx6nfwy35F3TgRAtjIAJ9ryEjr0kaaEapRD0z1bHQYmKi+1wCdEOZC
/wY2033SyIVl0za07v8RMkk=
=6BZ+
-----END PGP SIGNATURE-----
|
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 try to resize your browser window (even the slightest adjustment)
the margin snaps to the correct...
|
by: rsrimantula |
last post by:
I have a table with html code
<style>
div.scroll
{
height:150px;
overflow:auto;
}
table.scrollable th
{
position:relative;
| | |
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>
|
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, left etc.,
which makes me think using 'position: relative' has some other effect
that my book has...
|
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
|
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" content="text/html; charset=iso-8859-1">
|
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...
|
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...
| | |
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,...
|
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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...
|
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...
|
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
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
| |
