Rel positioning does/doesn't create positioning context?

I'm trying to use a relatively positioned <div> to create a positioning context
for a <p> such that the <p> will render within the <div> near the right edge.

I'm using XHTML 1.0 strict. My page validates in the W3C validator properly.
However, I'm not getting the correct results in IE or Mozilla for the PC.

I put screenshots here:

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

The word "Home" is the thing I'm trying to position. It's supposed to be inside
the horizontal blue bar, near the right edge. The blue bar is the <div>.

(I realize "Home" is also blue. I intend to correct that after I solve this
problem.)

Here's an excerpt from the code:

[...]

<body>
<div id="all">
<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="/~ethan/meetingnotes/index.htm">Home</a>

</p>
</div>

[...]

Any assistance would be greatly appreciated.

Thanks.

Jul 20 '05 #1

Subscribe Post Reply

1697

David Dorward

DM <elektrophyte-yahoo> wrote:

The word "Home" is the thing I'm trying to position. It's supposed to be
inside the horizontal blue bar, near the right edge. The blue bar is the
<div>.
font-size: 12px;">
Pixels bad :)
http://css-discuss.incutio.com/?page=UsingPixels
<p style="color:#ffffff;
font:Arial, Helvetica, sans-serif;
font-size: 12px;
position:absolute;
right:4px;">
<a href="/~ethan/meetingnotes/index.htm">Home</a>
</p>

So the link is at the left hand end of the <p> (as text-align: left is the
default), and the right edge of the <p> is against the right edge of the
<div>, but the <p> is still width: auto (also the default) so it is as wide
as the <div>. It looks like a simple text-align: right on the paragraph
will do what you want, no need to mess about with positioning.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Jul 20 '05 #2

DM wrote:

I'm trying to use a relatively positioned <div> to create a positioning
context for a <p> such that the <p> will render within the <div> near
the right edge.

I'm using XHTML 1.0 strict. My page validates in the W3C validator
properly. However, I'm not getting the correct results in IE or Mozilla
for the PC.

I put screenshots here:

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

The word "Home" is the thing I'm trying to position. It's supposed to be
inside the horizontal blue bar, near the right edge. The blue bar is the
<div>.

(I realize "Home" is also blue. I intend to correct that after I solve
this problem.)

Here's an excerpt from the code:

[...]

<body>
<div id="all">
<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="/~ethan/meetingnotes/index.htm">Home</a>

</p>

That Home <p> must either be within the ASA notes block which would have
to be abs. or rel. positioned or you could just make that <a
href="/~ethan/meetingnotes/index.htm">Home</a>
link styled (without a wrapping <p>)like this:

<a href="/~ethan/meetingnotes/index.htm" style="float: right;
padding-right: 4px;">Home</a>

Not tested.

Btw, I agree with what David told you: px for font-size is usually a bad
idea.

W3C Quality Assurance tip for webmasters: Care with font-size
Recommended Practices: Forget <font>, use CSS
"Do not specify the font-size in pt, or other absolute length units.
They render inconsistently across platforms and can't be resized by the
User Agent (e.g browser). Use relative length units such as percent or
(better) em, (...)"
http://www.w3.org/QA/Tips/font-size

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.3 :)

Jul 20 '05 #3

DU wrote:

DM wrote:
I'm trying to use a relatively positioned <div> to create a
positioning context for a <p> such that the <p> will render within the
<div> near the right edge.

I'm using XHTML 1.0 strict. My page validates in the W3C validator
properly. However, I'm not getting the correct results in IE or
Mozilla for the PC.

I put screenshots here:

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

The word "Home" is the thing I'm trying to position. It's supposed to
be inside the horizontal blue bar, near the right edge. The blue bar
is the <div>.

(I realize "Home" is also blue. I intend to correct that after I solve
this problem.)

Here's an excerpt from the code:

[...]

<body>
<div id="all">
<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="/~ethan/meetingnotes/index.htm">Home</a>

</p>

That Home <p> must either be within the ASA notes block which would have
to be abs. or rel. positioned or you could just make that <a
href="/~ethan/meetingnotes/index.htm">Home</a>
link styled (without a wrapping <p>)like this:

But it IS within the "ASA notes block" (you mean the <div>, right?). You trimmed
off the closing tag in my code, but the <p> is definitely INSIDE the <div>. Yet
in the browser it renders OUTSIDE the <div>. I can't figure out why.
<a href="/~ethan/meetingnotes/index.htm" style="float: right;
padding-right: 4px;">Home</a>

Not tested.

I tried it. Like this:

<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>
<a href="/~ethan/meetingnotes/index.htm" style="margin: 0; padding:0;font-size:
12px; font-family:Arial, Helvetica, sans-serif;
float:right; padding-right: 4px;">Home</a>
</div>

The "Home" type still winds up outside the blue bar (the <div>), below it to the
right.

Is there a way to achieve this fairly simple result without resorting to a table?

By the way, in case I didn't mention it before, I'm trying to get the title "ASA
Notes" and the word "Home" to line up horizontally, not have one above the
other. That why I'm not just using "text-align: right".

Jul 20 '05 #4

Similar topics

CSS Positioning and Browser Resizing

by: Bryan R. Meyer | last post by:

Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. ...

HTML / CSS

fixed positioning..

by: Frances Del Rio | last post by:

don't know if I'll succeed, have spent a lot of time already trying to figure this out: I would like to position a footer (co. name, address, etc..) at the bottom of browser page, in such a way...

HTML / CSS

Positioning context - does it work?

by: rajek | last post by:

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

HTML / CSS

Positioning Problem in CSS

by: CJM | last post by:

I'm developing a web application, that has a left-sided navigation menu and a centre-right content area. The menu is static and therefore is in an INCLUDEd file. I'm wanting to add a link to a...

HTML / CSS

IE and Firefox positioning different

by: pasdecrap | last post by:

The following code will produce similar results in IE6 and firefox 1.0.4 however the left margin in FF is 4 pixels and in IE it is 5. Can anyone see why this is happening? I can't seem to figure...

HTML / CSS

css positioning

by: Charles Harrison Caudill | last post by:

with tables there is a clean and algorithmic way to organize things, but with css which is, once you get it working, much cleaner, I have to tweak and patch and hope and pray and curse before...

HTML / CSS

Absolute Positioning within Table Cell Alignment Problem in FireFox (Mozilla)

by: nino9stars | last post by:

Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...

HTML / CSS

relative positioning inside absolute positioned element - who is right?

by: mikewse | last post by:

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

HTML / CSS

Why does Thread class not support IDisposable?

by: Creativ | last post by:

Why does Thread class not support IDisposable? It's creating quite some problem. Namely, it can exhaust the resource and you have not control over it.

C# / C Sharp

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

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

General

Changing the language in Windows 10

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

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

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

Windows Server

AI Job Threat for Devs

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

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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

Microsoft Access / VBA