Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Absolute positioning of generated content

CSS 2.1 specification issue

12:22 pm on Mar 9, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 9, 2003
votes: 0

The specification states that a browser has to ignore the position property on generated content.

Since the generated content will be part of the block it is attached to, a border will surround the generated content as well as the element content.

If it was allowed to use absolute positioning for generated content it would be possible to instead have the border surrounding just the element content and not the generated content.

This by setting position=relative for the element, and position=absolute for the generated content so as not to be part of the normal flow but appearing as a header for the box.

For example:

name:before {position:absolute; top:-1em;content:"Name:"}
name {position:relative;border:solid}


This seems not to be possible if one implements the specification as written, which does not seem to be symmetric since there is no problem having a border just around the generated content

name:before {border:solid}

2:52 pm on Mar 9, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

Yes, I agree that would seem to be out of sync..

I can't even find a way of manipulating the CSS to prouduce a full box border effect (can do an top and bottom border) without adding another div/node, which then defeats the XML purpose of keeping the design and content seperate.

In saying that it still might be a worthwhile thing to do temporarily as there are many CSS effects/workarounds which can be achieved "by wrapping the content div in a container div" and the addition of another node(not even sure if that's the right term ;)) would enable designers to keep using their workarounds (until browsers get there) and to add any extra styling until they change/add to the specs....

<first-name> Roger </first-name>
<last-name> Larsson </last-name>

then some css:
style{border: 1px solid blue; padding: 10px;}

not ideal but neither is a workaround in any language!



Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members