Hello experts,
I would be very grateful if you would have a look at the following
URL: http://www.omeganet.de/test.html
The html file and the associated style have been validated
successfully by the online validators of w3.org.
In my opinion, the word "ABSOLUTE" should appear within the blue
frame, 10 pixels from the left side of the blue frame.
According to the CSS 2.1 reference on w3.org regarding the
"position:absol ute" style: "The box's position (and possibly size) is
specified with the 'top', 'right', 'bottom', and 'left' properties.
These properties specify offsets with respect to the box's containing
block.".
Since the div containing the word "ABSOLUTE" is placed within the div
with the blue frame, the div with the blue frame is the containing
block, right? So why is the word "ABSOLUTE" placed 10 pixels left from
the _browser_ window, which is completely wrong?
I get this behaviour in the latest versions of IE, Firefox, Mozilla
and Opera, so I suspect the error is on my side although I have read
the specs multiple times.
Thanks for your help
Peter 4 3142
Peter Pfannenschmid wrote: http://www.omeganet.de/test.html
In my opinion, the word "ABSOLUTE" should appear within the blue frame, 10 pixels from the left side of the blue frame.
According to the CSS 2.1 reference on w3.org regarding the "position:absol ute" style: "The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block.".
Since the div containing the word "ABSOLUTE" is placed within the div with the blue frame, the div with the blue frame is the containing block, right?
Not necessarily. The containing box is the most immediate ancestor box
whose position is not static. If there is no such box, the containing
box is the window.
--
Brian
Peter Pfannenschmid wrote: Hello experts, I would be very grateful if you would have a look at the following URL: http://www.omeganet.de/test.html
<snip> In my opinion, the word "ABSOLUTE" should appear within the blue frame, 10 pixels from the left side of the blue frame.
<div style="position :relative; left:10px;">ABS OLUTE</div>
or
div.FrameBlue { border-color:#0000FF; border-width:1px;
border-style:solid; padding-top:4pt; padding-bottom:4pt; position:
relative } http://www.juicystudio.com/tutorial/css/fixed.asp
Absolute Position
When an element is positioned absolutely, it is removed from the normal
flow, and has no effect on other elements in the normal flow. The
element is portioned according to its container block using the offset
positions left, right, top, and bottom.
*** A containing block is an element with the position property set to
relative or fixed. If the element isn't inside a containing block, the
browser window will be the containing block. ***
Mike
Peter Pfannenschmid wrote: Hello experts,
I would be very grateful if you would have a look at the following URL:
http://www.omeganet.de/test.html
The html file and the associated style have been validated successfully by the online validators of w3.org.
In my opinion, the word "ABSOLUTE" should appear within the blue frame, 10 pixels from the left side of the blue frame.
According to the CSS 2.1 reference on w3.org regarding the "position:absol ute" style: "The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block.".
Since the div containing the word "ABSOLUTE" is placed within the div with the blue frame, the div with the blue frame is the containing block, right? So why is the word "ABSOLUTE" placed 10 pixels left from the _browser_ window, which is completely wrong?
I get this behaviour in the latest versions of IE, Firefox, Mozilla and Opera, so I suspect the error is on my side although I have read the specs multiple times.
Related to your question/problem, you should check out: http://www.w3.org/TR/CSS21/visuren.h...ntaining-block http://www.w3.org/TR/CSS21/visudet.h...-block-details
The 'Containing Block' is determined by the Positioning Property of both
the content element and that of the container block (nearest ancestor).
Rephrasing what has been said, the way that you have it now, the
'Containing Block' is the Viewport (initial containing block) since the
nearest ancestor to the Absolute Box is Static.
Add position:relati ve; in order to make FrameBlue the 'Containing
Block' for the Absolute Div and add padding:0; to remove your entered
padding amounts. The text in question will now be positioned as you want.
If you wish to have it bordered, then you will have to give FrameBlue
height, so add height:16px; (or whatever) to it and add width:100px;
(or whatever) to set the box width.
--
Gus
Gus Richter <gu********@net scape.net> wrote in message news:<bq******* *************@g olden.net>... Peter Pfannenschmid wrote:
Related to your question/problem, you should check out: http://www.w3.org/TR/CSS21/visuren.h...ntaining-block http://www.w3.org/TR/CSS21/visudet.h...-block-details
The 'Containing Block' is determined by the Positioning Property of both the content element and that of the container block (nearest ancestor).
Rephrasing what has been said, the way that you have it now, the 'Containing Block' is the Viewport (initial containing block) since the nearest ancestor to the Absolute Box is Static.
Add position:relati ve; in order to make FrameBlue the 'Containing Block' for the Absolute Div and add padding:0; to remove your entered padding amounts. The text in question will now be positioned as you want.
If you wish to have it bordered, then you will have to give FrameBlue height, so add height:16px; (or whatever) to it and add width:100px; (or whatever) to set the box width.
Dear Brian, mcir and Gus,
thank you very much for your fast and excellent advice. Indeed, I had
only read the passage where the first link mentioned by Gus points to,
but I had overlooked the passage where the second link points to.
Now I can continue my fight of converting a table-driven layout to a
CSS-driven one...
Yours sincerely,
Peter This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Alexander Fischer |
last post by:
Hello everybody,
can someone help me with this problem:
I'm creating a page with a sidebar, and I wanted to create the sidebar as a div
which gets a "position:absolute". The problem: if the sidebar's content is
longer than the main content, my IE6 will not create a vertical scrollbar for
the page, which makes the lower part of the sidebar unreadable.
Take this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
|
by: Harald Kirsch |
last post by:
In the W3C document about CSS2, I read at
http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position
the following:
absolute
The box's position (and possibly size) is specified with the
'left', 'right', 'top', and 'bottom' properties. These properties
|
by: KiwiBrian |
last post by:
What would be the behaviour and characteristics of a div that was both
positioned absolute, and floated?
Are they contradictory or complementary regarding how the div is perceived
by other content?
Is it a valid or stupid thing to do?
Brian Tozer
|
by: Steel |
last post by:
Hi at all,
I'ld want to know if position:absolute is crossbrowser.
Infact I cannot position absolutely an element in the some place with
fox-pro and MSIE6
There is always a little difference
Steel
|
by: alex |
last post by:
I'm playing around with css popups a la
http://www.meyerweb.com/eric/css/edge/popups/demo.html
for here:
http://www.redbrick.dcu.ie/~alex/golf/courseinfo.html
(css)
http://www.redbrick.dcu.ie/~alex/golf/css/golf-main.css
| |
by: Pablito |
last post by:
Hi at all,
I have a little problem about position:absolute.
I want to position absolutely a menu bar.
if I write:
menubar {position: absolute;top:5.2em;}
with MSIE the menu bar is too height on the screen and is right on FireFox
elseif I write
menubar {position: absolute;top:100px;}
the menu bar is right with NSIE and not with FF
How can I do to have a crossbrowser result of my menu var?
|
by: ThunderMusic |
last post by:
Hi,
I think the subject says it all...
thanks
ThunderMusic
|
by: André Hänsel |
last post by:
Hi,
I want to make a horizontal navigation with the second level beneath
the first level.
The items of the second level shall appear left aligned with their
corresponding first level item. To visualize it:
Entry1 Entry2 Entry3 Entry4
Entry3.1 Entry3.2 Entry3.3
|
by: jobs |
last post by:
I have a simple login page with roughly a 300px x 300px image behind
the asp.net login control. I need the login control to land in the
middle of the image. I want both the image and the login controlrol to
always be in the center of the page. How can I do this?
I use position:absolute to get the asp.net login control on top of
the image, but then when the IE window size is changed (by the user)
the login control does not center. Here's...
|
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: 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,...
| |
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 captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
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: 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 into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
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
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
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...
| |