Faux Absolute Positioning

On Sep 15, 2:49*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

On 2008-09-15, Fistro <rafam... (AT) gmail (DOT) com> wrote:



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

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.

Can the CSS float model be considered as a black-and-white w3 spec?

On 2008-09-15, Fistro <rafaminu (AT) gmail (DOT) com> wrote:

On Sep 15, 2:49*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
[...]
The point is, for maximum robustness only rely on things that are
absolutely black-and-white in the spec.
w3 specs, you mean?

Yes.

Can the CSS float model be considered as a black-and-white w3 spec?

It's pretty good. But if you read it, quite a lot of it is written in
terms of the "outer margin boxes" of floats.

What's not so black and white is where the left and right edges of the
outer margin box are for a float with a negative margin larger than its
width.

You could say, well it has a negative width ergo its left edge is
actually on the right (not what most browsers do).

Or you could say, this is silly, just treat its width as zero (basically
what most browsers do do).

But it's not wise to rely on that.

The spec is a little bit unhelpful on this. If you set a negative width
explicitly on something, that's illegal, so gets ignored altogether.
Fine, but if you follow the other rules in the spec, you can quite
easily end up with a "used" negative width, and there's no guidance on
what you're supposed to do with that.

So safer to avoid setting things that result in used negative widths.
But the faux-absolute-positioning layout _relies_ on used negative
widths and on the way browsers treat them.

On Sep 15, 3:16*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

On 2008-09-15, Fistro <rafam... (AT) gmail (DOT) com> wrote:

On Sep 15, 2:49*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
[...]
The point is, for maximum robustness only rely on things that are
absolutely black-and-white in the spec.
w3 specs, you mean?

Yes.

Can the CSS float model be considered as a black-and-white w3 spec?

It's pretty good. But if you read it, quite a lot of it is written in
terms of the "outer margin boxes" of floats.

What's not so black and white is where the left and right edges of the
outer margin box are for a float with a negative margin larger than its
width.

You could say, well it has a negative width ergo its left edge is
actually on the right (not what most browsers do).

Or you could say, this is silly, just treat its width as zero (basically
what most browsers do do).

But it's not wise to rely on that.

The spec is a little bit unhelpful on this. If you set a negative width
explicitly on something, that's illegal, so gets ignored altogether.
Fine, but if you follow the other rules in the spec, you can quite
easily end up with a "used" negative width, and there's no guidance on
what you're supposed to do with that.

So safer to avoid setting things that result in used negative widths.
But the faux-absolute-positioning layout _relies_ on used negative
widths and on the way browsers treat them.

Now, that's a real argument.
Thank you.

Faux Absolute Positioning
On 15 Sep, 01:08, 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

First of all. This is certainly not how CSS is supposed to work.
Ben C, is making some points about that.

I my opinion, emulating tables with css is almost as bad as tables
themselves. They are imposing the same problems that we are trying
to avoid. Uh, oh, but tables isn't semantic correct. Well, that has
more to do about feelings than anything else. Ten years ago, some
browsers
had problem to make a difference between tables for layout and tables
for 'tablular data'. Sorry to say, to day, all browsers handles that.

The semantic meaning of tables isn't 'tabular data'. The phrase
'tabluar
data' isn't mention in the recommendations at all. Uh, oh, but is
should.
Well, if you can't trust the vendors of browsers, who can you trust.

It's recommended that we start to use positioning, instead of tables
when that is supported by major browsers. That hasn't happened.

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.

The hole style sheet is one big Internet Explorer hack. Safari, Opera,
Firefox
and all other modern browsers supports CSS tables.
http://www.w3.org/TR/CSS21/tables.html#table-display

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.

Use em instead of pixels. It works. Get rid of 'overflow: hidden' and

..column { /* all columns have continous background color */
margin-bottom: -5000px;
padding-bottom: 5000px;
}

You have at least four elements that you can use to emulate that
behavior
with background images/colors: html, body, #canvas, #main.

Include the whole style sheet in an conditional comment
<!--[if IE]><link rel="stylesheet" type="text/css"
href="ie6_7_hack.css"><![endif]-->

And use CSS tables for all other browsers.

Comment out unnecessary divs:

<!--[if IE]><div id="canvas"><![endif]-->
<div class="line">
<div class="item" id="item1">
<!--[if IE]><div class="sap-content">content here</div><![endif]-->
</div>
</div>
<!--[if IE]></div><![endif]-->

And use CSS tables for any other browsers:

..line { display: table-row }
..item { display: table-cell }

You could also change the class names to something more meaningful.

canvas -> table
line -> tr
item -> td
sap-content -> inner-wrapper

i.e.:

<div id="table">
<div class="tr">
<div class="td" id="left">
<div class="inner-wrapper">content here</div>
</div>
</div>
</div>

On 2008-09-16, Roy A. <royarneskar (AT) gmail (DOT) com> wrote:

Faux Absolute Positioning
On 15 Sep, 01:08, 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

First of all. This is certainly not how CSS is supposed to work.
Ben C, is making some points about that.

I my opinion, emulating tables with css is almost as bad as tables
themselves. They are imposing the same problems that we are trying
to avoid. Uh, oh, but tables isn't semantic correct.

As you say, there has been a solution to that for years: display:
table-cell etc. Semantically whatever you want but looks like a table
so everyone's happy. But IE doesn't support it...

The other factor is that people got so used to layouts that looked like
nested tables they still think like that. I see quite a few big sites
that used to be done with nested tables, and looked like nested tables,
that now look the same but are done with unbelievably maniacal CSS
instead.

You have to be careful what you wish for because you might get it.

[...]

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.

The hole style sheet is one big Internet Explorer hack. Safari, Opera,
Firefox and all other modern browsers supports CSS tables.
http://www.w3.org/TR/CSS21/tables.html#table-display

In principle I agree but the layout they're achieving here isn't quite
like tables, it's more like absolute positioning.

The basic idea is to be able to give each "cell" an absolute offset from
the left of the "row" it's in, with no wrapping or stretching and even
if it makes things overlap.

Tables don't generally do that, although you might be able to get
something similar with table-layout: fixed.