 | |
Faux Absolute Positioning
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Faux Absolute Positioning -
09-14-2008
, 07:08 PM
#2
| |||
| |||
|
|
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-against-faux-absolute-positioning/ |
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.
#3
| |||
| |||
|
|
"Fistro" <rafaminu (AT) gmail (DOT) com> wrote in message news:d4f3de8f-41eb-4229-9cc3-b43c21694446 (AT) m44g2000hsc (DOT) googlegroups.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-against-faux-absolute-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. |
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
#4
| |||
| |||
|
|
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. |
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 "graphically
rich" when it comes to marking it up as HTML/CSS
#5
| |||
| |||
|
|
"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote in message news:doraymeRidThis-02B748.12020115092008 (AT) web (DOT) 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! |
Quote:
|
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 "graphically rich" when it comes to marking it up as HTML/CSS |
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
#6
| |||
| |||
|
|
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-against-faux-absolute-positioning/ I'd like to have your valuable opinion. |
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.
#7
| |||
| |||
|
|
On 2008-09-14, Fistro <rafam... (AT) gmail (DOT) com> wrote: 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-against-faux-absolute-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. |
browsers.
But since it works well even in Quirks mode, I can safely assume that
it will "upgrade" just fine?
#8
| |||
| |||
|
|
On Sep 15, 11:05*am, Ben C <spams... (AT) spam (DOT) eggs> wrote: [...] 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? |
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.
#9
| |||
| |||
|
|
On 2008-09-15, Fistro <rafam... (AT) gmail (DOT) com> wrote: On Sep 15, 11:05*am, Ben C <spams... (AT) spam (DOT) eggs> wrote: [...] 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: |
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
Quote:
|
The point is, for maximum robustness only rely on things that are absolutely black-and-white in the spec. w3 specs, you mean? |
Quote:
|
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. |
blissfully ignore it.
#10
| |||
| |||
|
|
On Sep 15, 1:50*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote: On 2008-09-15, Fistro <rafam... (AT) gmail (DOT) com> wrote: On Sep 15, 11:05*am, Ben C <spams... (AT) spam (DOT) eggs> wrote: [...] 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 |
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.
Quote:
|
The point is, for maximum robustness only rely on things that are absolutely black-and-white in the spec. w3 specs, you mean? |
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.