473,725 Members | 2,383 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Faux Absolute Positioning

I'm trying to find a design that would allow me to build web pages
without having to worry about compatibility issues (not too much, in
any case,,,)

I've came across this CSS layout technique:
http://alistapart.com/articles/fauxabsolutepositioning

It calculates the left offset from a fixed position, as opposed to
calculating it from the right edge of the preceding element by using a
combination of position: relative, left: 100% and a negative margin-
left.

This approach requires no hacks and it works with all modern browsers
(Safari, Opera, Firefox, IE7) as well as IE6 and even IE5.5/Win, which
is more than I had ever hoped for.

Some people though, have presented an Argument Against Faux Absolute
Positioning:
http://www.cssnewbie.com/argument-ag...e-positioning/

I'd like to have your valuable opinion.
Many Thanks.

Sep 14 '08 #1
14 3311
"Fistro" <ra******@gmail .comwrote in message
news:d4******** *************** ***********@m44 g2000hsc.google groups.com...
I'm trying to find a design that would allow me to build web pages
without having to worry about compatibility issues (not too much, in
any case,,,)

I've came across this CSS layout technique:
http://alistapart.com/articles/fauxabsolutepositioning

It calculates the left offset from a fixed position, as opposed to
calculating it from the right edge of the preceding element by using a
combination of position: relative, left: 100% and a negative margin-
left.

This approach requires no hacks and it works with all modern browsers
(Safari, Opera, Firefox, IE7) as well as IE6 and even IE5.5/Win, which
is more than I had ever hoped for.

Some people though, have presented an Argument Against Faux Absolute
Positioning:
http://www.cssnewbie.com/argument-ag...e-positioning/
His argument is essentially that it bloats the markup.

He makes a good point but his approach is not pragmatic for anything but
fairly simple layouts.

At this point in time given current browser support for CSS (particularly
from you-know-who) it is impossible to make any graphically rich layout that
doesn't need extra "hooks" in the form of wrapper divs, extra ids and
classes etc.

The problem is that if you don't know exactly what you're doing you are
going to end up with a *lot* of hooks. The aim should be to minimize the
number you use rather than eliminate them entirely, which is sadly not
possible at this point.

Sep 15 '08 #2
In article <ga**********@r egistered.motza rella.org>,
"Nik Coughlin" <nr******@gmail .comwrote:
"Fistro" <ra******@gmail .comwrote in message
news:d4******** *************** ***********@m44 g2000hsc.google groups.com...
I'm trying to find a design that would allow me to build web pages
without having to worry about compatibility issues (not too much, in
any case,,,)

I've came across this CSS layout technique:
http://alistapart.com/articles/fauxabsolutepositioning

It calculates the left offset from a fixed position, as opposed to
calculating it from the right edge of the preceding element by using a
combination of position: relative, left: 100% and a negative margin-
left.

This approach requires no hacks and it works with all modern browsers
(Safari, Opera, Firefox, IE7) as well as IE6 and even IE5.5/Win, which
is more than I had ever hoped for.

Some people though, have presented an Argument Against Faux Absolute
Positioning:
http://www.cssnewbie.com/argument-ag...e-positioning/

His argument is essentially that it bloats the markup.

He makes a good point but his approach is not pragmatic for anything but
fairly simple layouts.

At this point in time given current browser support for CSS (particularly
from you-know-who) it is impossible to make any graphically rich layout that
doesn't need extra "hooks" in the form of wrapper divs, extra ids and
classes etc.

The problem is that if you don't know exactly what you're doing you are
going to end up with a *lot* of hooks. The aim should be to minimize the
number you use rather than eliminate them entirely, which is sadly not
possible at this point.
All good points. But I like the idea that if you are having to go to so
much trouble, maybe you are wanting unnecessarily rich graphical
layouts. There is a real issue here. Given that you want such things, I
agree with your points. But I rather think there is too much graphic
richness altogether in this world and I doubt if it is all that
appreciated beyond very superficially in websites.

--
dorayme
Sep 15 '08 #3
"dorayme" <do************ @optusnet.com.a uwrote in message
news:do******** *************** ***********@web .aioe.org...
>
All good points. But I like the idea that if you are having to go to so
much trouble, maybe you are wanting unnecessarily rich graphical
layouts. There is a real issue here. Given that you want such things, I
agree with your points. But I rather think there is too much graphic
richness altogether in this world and I doubt if it is all that
appreciated beyond very superficially in websites.
Yes.... but... a requirement for what I do. Spent any time around graphic
designers or marketing people? :)

I can just see myself trying to tell them that I think that their pretty
design is unnecessarily rich because it would require a few extra divs in
the markup, hence offending my sense of markup purism and that I therefore
won't do it, even though I know how to. Bye bye client, bye bye job!

With tongue now out of cheek, good graphic design done well can add a lot to
the user experience, and sometimes what appears to superficially be a clean,
simple graphical design can easily fall under the category of "graphicall y
rich" when it comes to marking it up as HTML/CSS

Sep 15 '08 #4
In article <ga**********@r egistered.motza rella.org>,
"Nik Coughlin" <nr******@gmail .comwrote:
"dorayme" <do************ @optusnet.com.a uwrote in message
news:do******** *************** ***********@web .aioe.org...

All good points. But I like the idea that if you are having to go to so
much trouble, maybe you are wanting unnecessarily rich graphical
layouts. There is a real issue here. Given that you want such things, I
agree with your points. But I rather think there is too much graphic
richness altogether in this world and I doubt if it is all that
appreciated beyond very superficially in websites.

Yes.... but... a requirement for what I do. Spent any time around graphic
designers or marketing people? :)

I can just see myself trying to tell them that I think that their pretty
design is unnecessarily rich because it would require a few extra divs in
the markup, hence offending my sense of markup purism and that I therefore
won't do it, even though I know how to. Bye bye client, bye bye job!
No, of course.... a buck is a buck.
With tongue now out of cheek, good graphic design done well can add a lot to
the user experience, and sometimes what appears to superficially be a clean,
simple graphical design can easily fall under the category of "graphicall y
rich" when it comes to marking it up as HTML/CSS
True words indeed. I sometimes worry that what I end up doing for a
client looks too simple and he will wonder why it took so damn long or
cost so much. It never starts simple, I tell them, I work hard to get it
down to this. Now pay up. <g>

There is a serious issue in all of this stuff, about whether the world
would be a much better place if humans stopped wanting to cheer
themselves up with - to put it politely - more beauty than function
requires. I believe it would.

--
dorayme
Sep 15 '08 #5
On 2008-09-14, Fistro <ra******@gmail .comwrote:
I'm trying to find a design that would allow me to build web pages
without having to worry about compatibility issues (not too much, in
any case,,,)

I've came across this CSS layout technique:
http://alistapart.com/articles/fauxabsolutepositioning

It calculates the left offset from a fixed position, as opposed to
calculating it from the right edge of the preceding element by using a
combination of position: relative, left: 100% and a negative margin-
left.

This approach requires no hacks and it works with all modern browsers
(Safari, Opera, Firefox, IE7) as well as IE6 and even IE5.5/Win, which
is more than I had ever hoped for.

Some people though, have presented an Argument Against Faux Absolute
Positioning:
http://www.cssnewbie.com/argument-ag...e-positioning/

I'd like to have your valuable opinion.
Top marks for ingenuity.

One problem is that each "item" has to have a width smaller than its
margin-left, or the margins no longer work as offsets from the right
edge.

Here's a test page: http://www.tidraso.co.uk/misc/faux.html

Try putting display: none back on #item1 (it's commented out) and you
will see #item2 moves.

This is because #item1 has a positive outer margin width, which moves
#item2 "real" position right a bit, so it can fit to the right of
#item1. It's moved back a constant amount from there with the negative
margin-left, so it stays too far right.

Too many items with positive outer margin widths, and the floats will
start to wrap eventually and then things will look really weird.

So the first problem is that each item has to have a negative or zero
outer margin width.

This brings me to the second problem: he's relying on browsers treating
negative outer margin widths on floats as zero, but that isn't specified
in CSS 2.1 (or not that I can find) so it's just lucky it works. It
might not work in all browsers, and a new browser could legitimately do
it differently.

So while it's good if you can test something and show it works in the
current generation of main browsers, it's much better if you can also
show that you're relying only on behaviour that's clearly defined by the
specification. I'm not convinced you can do that for this technique.
Sep 15 '08 #6
On Sep 15, 11:05*am, Ben C <spams...@spam. eggswrote:
On 2008-09-14, Fistro <rafam...@gmail .comwrote:
I'm trying to find a design that would allow me to build web pages
without having to worry about compatibility issues (not too much, in
any case,,,)
I've came across this CSS layout technique:
http://alistapart.com/articles/fauxabsolutepositioning
It calculates the left offset from a fixed position, as opposed to
calculating it from the right edge of the preceding element by using a
combination of position: relative, left: 100% and a negative margin-
left.
This approach requires no hacks and it works with all modern browsers
(Safari, Opera, Firefox, IE7) as well as IE6 and even IE5.5/Win, which
is more than I had ever hoped for.
Some people though, have presented an Argument Against Faux Absolute
Positioning:
http://www.cssnewbie.com/argument-ag...e-positioning/
I'd like to have your valuable opinion.

Top marks for ingenuity.

One problem is that each "item" has to have a width smaller than its
margin-left, or the margins no longer work as offsets from the right
edge.

Here's a test page:http://www.tidraso.co.uk/misc/faux.html

Try putting display: none back on #item1 (it's commented out) and you
will see #item2 moves.

This is because #item1 has a positive outer margin width, which moves
#item2 "real" position right a bit, so it can fit to the right of
#item1. It's moved back a constant amount from there with the negative
margin-left, so it stays too far right.

Too many items with positive outer margin widths, and the floats will
start to wrap eventually and then things will look really weird.

So the first problem is that each item has to have a negative or zero
outer margin width.

This brings me to the second problem: he's relying on browsers treating
negative outer margin widths on floats as zero, but that isn't specified
in CSS 2.1 (or not that I can find) so it's just lucky it works. It
might not work in all browsers, and a new browser could legitimately do
it differently.

So while it's good if you can test something and show it works in the
current generation of main browsers, it's much better if you can also
show that you're relying only on behaviour that's clearly defined by the
specification. I'm not convinced you can do that for this technique.
That was my main fear, that the layout could break apart with new
browsers.
But since it works well even in Quirks mode, I can safely assume that
it will "upgrade" just fine?
Sep 15 '08 #7
On 2008-09-15, Fistro <ra******@gmail .comwrote:
On Sep 15, 11:05*am, Ben C <spams...@spam. eggswrote:
[...]
>So while it's good if you can test something and show it works in the
current generation of main browsers, it's much better if you can also
show that you're relying only on behaviour that's clearly defined by the
specificatio n. I'm not convinced you can do that for this technique.

That was my main fear, that the layout could break apart with new
browsers.
But since it works well even in Quirks mode, I can safely assume that
it will "upgrade" just fine?
Working in quirks mode is no indication of future-proofness.

The point is, for maximum robustness only rely on things that are
absolutely black-and-white in the spec.

That way if it doesn't work, you know it's a browser bug, can make a bug
report, and most browser makers will go and fix it. There's also a
better chance it will work in arbitrary browsers in the first place.
Sep 15 '08 #8
On Sep 15, 1:50*pm, Ben C <spams...@spam. eggswrote:
On 2008-09-15, Fistro <rafam...@gmail .comwrote:
On Sep 15, 11:05*am, Ben C <spams...@spam. eggswrote:
[...]
So while it's good if you can test something and show it works in the
current generation of main browsers, it's much better if you can also
show that you're relying only on behaviour that's clearly defined by the
specification. I'm not convinced you can do that for this technique.
That was my main fear, that the layout could break apart with new
browsers.
But since it works well even in Quirks mode, I can safely assume that
it will "upgrade" just fine?

Working in quirks mode is no indication of future-proofness.
Here's someone that would surely disagree:
"My mostly mode-independent and progressive design methods with IE6 in
Quirks mode, seems to hit right with future development of IE/win. IE/
win will handle my creations more or less identical in all modes
anyway.
I can keep on designing this way well into the future, and be able to
take advantage of whatever standard-support improvement they manage to
get into those future IE-versions."
http://www.gunlaug.no/contents/wd_additions_16.html
The point is, for maximum robustness only rely on things that are
absolutely black-and-white in the spec.
w3 specs, you mean?
That way if it doesn't work, you know it's a browser bug, can make a bug
report, and most browser makers will go and fix it. There's also a
better chance it will work in arbitrary browsers in the first place.
You are probably right, most browser makers will go and fix it.
Problem is that the most popular "browser maker" would most likely
blissfully ignore it.

Sep 15 '08 #9
On 2008-09-15, Fistro <ra******@gmail .comwrote:
On Sep 15, 1:50*pm, Ben C <spams...@spam. eggswrote:
>On 2008-09-15, Fistro <rafam...@gmail .comwrote:
On Sep 15, 11:05*am, Ben C <spams...@spam. eggswrote:
[...]
>So while it's good if you can test something and show it works in the
current generation of main browsers, it's much better if you can also
show that you're relying only on behaviour that's clearly defined by the
specificatio n. I'm not convinced you can do that for this technique.
That was my main fear, that the layout could break apart with new
browsers.
But since it works well even in Quirks mode, I can safely assume that
it will "upgrade" just fine?

Working in quirks mode is no indication of future-proofness.
Here's someone that would surely disagree:
"My mostly mode-independent and progressive design methods with IE6 in
Quirks mode, seems to hit right with future development of IE/win. IE/
win will handle my creations more or less identical in all modes
anyway.
I can keep on designing this way well into the future, and be able to
take advantage of whatever standard-support improvement they manage to
get into those future IE-versions."
http://www.gunlaug.no/contents/wd_additions_16.html
There is an argument that while they might try to fix their broken
standards-mode they're more likely to leave their quirks mode alone
(since it's supposed to be broken, and is therefore correct in the
Albert Wiersch sense of the word).

But targetting IE's quirks mode is a reasonably good way to make sure
that things won't work properly in future browsers.
>The point is, for maximum robustness only rely on things that are
absolutely black-and-white in the spec.
w3 specs, you mean?
Yes.
Sep 15 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
2338
by: Tom Szabo | last post by:
Hi, Just wondering if there are any disadvantage in absolute positioning controls on a page? In example instead of putting the text fields into a table to align properly, one would absolute position them. I understand the issue with resize, that is not a problem.
7
6307
by: Griff Miller | last post by:
Please see http://home.houston.rr.com/gmiller15/css/vertprob.html . In mozilla 1.6/1.7 it looks the way I want it, with a thin separation between the two boxes. In IE6, the two boxes touch, which is not what I want. Is there a way to get IE6 to do it the mozilla way? Thanks! Griff
4
4604
by: mike eli | last post by:
Hi, I have several absolute positioned elements inside an absolute positioned DIV. I would like one of the nested elements to have a dynamic width. I set it's left and right attributes to 5, so the the element should have a width = parentWidth - 10; This is the desired behaviour, but it won't work. I still have to specify a width or the element has a width of 0. Setting the width to '100%' doesn't give me the desired effect; it takes...
4
2109
by: Alan Silver | last post by:
Hello, Having been a light reader of this ng for a few months now (after several years absence), I have noticed that absolute positioning seems to be considered a Very Bad Thing around here. Generally, when someone posts a question about a design that uses it, they are told not to. Now, in my ignorance, I don't see what's wrong with it, when used sensibly. Let me say straight off that I am *not* talking about trying to produce...
3
2229
by: horusprim | last post by:
Is there a CSS absolute positioning rendering bug in FF1.02 and IE 6? I have been experimenting with precision absolute positioning in CSS. The following test content was used in the experiment: "This sentence is to be about nine words long. I hope this test suite works. Mary had a little lamb and its fleece was white as snow." Next a macro was used to divide the content into equal sentence fragment spans of the 12 characters each...
2
3164
by: nonsensitor | last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out. The first problem is that I would like to display some text on top of an image within the header. I've tried using absolute positioning to specify where the phone number should appear in relation to the parent div (#header). However the text appears to be positioned in...
6
2916
by: Mark | last post by:
hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img src='photos/thumbs/ bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div> where 'thumb' is my container, and 'del' should be aligned to the top right. here's the css
20
2814
by: mehstg1319 | last post by:
Hi there Not sure if anyone can help me, I am working on a site for my university, and am having a bit of trouble with css positioning. I am very new to css and do not know very much about it. Here is the link: http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrix/matrix.html Basically, the problem is that the ticks on the grid look perfectly
4
1675
by: TamusJRoyce | last post by:
Looking at various Holy Grail techniques for html layouts, I came across Faux Positioning Layout. What I'm curious about is the differences between the two. I have no understanding of the Holy Grail, but have a working implementation of Faux Positioning (which may be a bit harder to do than the Holy Grail). Both are compatible among various browsers, but are they really both the same thing? They both have negative margin-left css values,...
0
8874
marktang
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...
0
8748
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,...
0
9393
Oralloy
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...
1
9164
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,...
0
9092
tracyyun
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...
1
6695
isladogs
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...
0
4775
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2622
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2151
bsmnconsultancy
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...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.