Click here to get back home

Positioning context - does it work?

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Positioning context - does it work? rajek 09-25-2004
Posted by rajek on September 25, 2004, 1:58 pm
Please log in for more thread options
I posted a similar question yesterday, but didn't get an answer that
resolved the issue. (Thanks to those who tried though.)

The background: I've read in books and online that if you have one
element with "relative" positioning, such as a <div>, it creates a
"positioning context" for element within it. E.g., if you have a <p>
inside your <div> you can give it absolute positioning and position it
(right, left, top, bottom) in terms of the <div> -- not in terms of the
browser window. So in this scenario...

<div style="position:relative;">

<p style="position:absolute;
top:20px;
left:20px;">

Some text

</p>

</div>

.... the <p> will not be positioned 20 by 20 pixels from the window upper
left (assume the <div> is somewhere lower down in the page). It will be
located those dimensions in relation to the upper left corner of the
<div>. And that's supposed to work in all up-to-date browsers from what
I've read.

However, I can't get it to work.

Here is some code from a page I'm trying to design:

[...]

<div style="position: relative;
background-color:#003399;
padding:3px;
margin: 12px 0 0 0;">
<h1 style="margin: 0;
padding: 0;
color:#ffffff;
font:Arial, Helvetica, sans-serif;
font-size: 12px;">
ASA Notes
</h1>
<p style="color:#ffffff;
font:Arial, Helvetica, sans-serif;
font-size: 12px;
position:absolute;
right:4px;">
<a href="/meetingnotes/index.htm">Home</a>

</p>
</div>

[...]

And the resulting output in IE and Mozilla is here:

http://www.somerandomcrap.com/temp/cssscreenshots.htm

Note that the word "Home" is OUTSIDE of the <div> and not located where
intended: inside the <div> near the right edge, lined up at the same
vertical level as the <h1> element with "ASA Notes" in it.

So do the supposed CSS positioning "rules" have any validity? Or is the
problem that I'm not understanding them correctly? Or have I made some
syntax error?

By the way, I also tried achieving the desired effect using the "float"
property, but that didn't work either.

I checked that the document is valid XHTML 1.0 strict.

Any help would be greatly appreciated.


Posted by Toby Inkster on September 26, 2004, 2:58 pm
Please log in for more thread options
rajek wrote:

> And the resulting output in IE and Mozilla is here:
> http://www.somerandomcrap.com/temp/cssscreenshots.htm

In this case it just looks like you've triggered an IE bug (there are
many). You could probably acheive the desired effect using
text-align:right instead.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Now Playing ~ ./white_town_-_your_woman.ogg



Posted by rajek on September 26, 2004, 12:09 pm
Please log in for more thread options
Toby Inkster wrote:

> rajek wrote:
>
>
>>And the resulting output in IE and Mozilla is here:
>>http://www.somerandomcrap.com/temp/cssscreenshots.htm
>
>
> In this case it just looks like you've triggered an IE bug (there are
> many). You could probably acheive the desired effect using
> text-align:right instead.
>

Thanks for the reply. However, note that the problem occurs in Mozilla
as well -- not just IE. Also, the desired effect (refer to my original
post for a description of that) would not be achieved using "text-align:
right".


Posted by Toby Inkster on September 27, 2004, 7:35 am
Please log in for more thread options
rajek wrote:
> Also, the desired effect would not be achieved using "text-align: right".

What about floating?
http://examples.tobyinkster.co.uk/floatyfloaty.strict

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact



Posted by DM on September 27, 2004, 10:03 am
Please log in for more thread options
Toby Inkster wrote:
> rajek wrote:
>
>>Also, the desired effect would not be achieved using "text-align: right".
>
>
> What about floating?
> http://examples.tobyinkster.co.uk/floatyfloaty.strict
>

Finally it works. Thanks a lot for the help.


Similar ThreadsPosted
CSS positioning: why does this work? May 15, 2006, 2:12 pm
Two lines of text in inline context September 1, 2005, 5:40 am
Your thoughts on Context Specific Wikis? September 13, 2006, 8:36 pm
css positioning June 3, 2005, 4:14 am
positioning layers April 25, 2006, 7:40 am
CSS positioning pickle July 11, 2006, 9:15 pm
Positioning within March 20, 2008, 10:31 am
Style absolute positioning October 25, 2004, 12:14 pm
IE 6 (WinXP) and CSS positioning broken?? February 13, 2005, 11:17 am
Positioning of stuff in a relative way April 26, 2005, 4:45 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap