Re: They just don't work

On Tue, 11 Nov 2003 23:03:13 +0000, jake wrote:

Steve, I assure you... it IS possible. If you want to see some great
examples, check out:
www.csszengarden.com
This site uses 1 very basic HTML file, and people submit CSS files which
display it very differently.

Not necessarily a good example as few of those designs produce a fluid
page, and in many cases don't produce resizable text.

Nice graphics, though ;-)

I'd still like to see a similar site/project promoting full CSS2 usage
that didn't have the IE 5.0 support requirement - or preferably no IE at
all

I have a feeling there'd be more scope for fluid designs without having to
support IE.

And while I'm dreaming, throw in some SVG

Cheers
Anton

"Steve Pugh" <steve (AT) pugh (DOT) net> wrote

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote:
In article Steve Pugh wrote:

http://steve.pugh.net/test/test62.html

Works just fine in IE5+ and Gecko based browsers. Positions the footer
just below the window bottom in Opera, which is very annoying but
could probably be worked around.

Opera correctly collapses margins, so you need to use bottom padding for
content. (99% of times when you have broken design on Opera or Mozilla
and can't find it, it is margin collapsing - in this case margin is
collapsed outside HTML element content area.)

Replace this line with
#content {margin-left: 150px; margin-bottom: 20px; height: auto;}
with
#content {margin-left: 150px; padding-bottom: 20px; height: auto;}

Not tested if it breaks on other browsers, but I think it is pretty
unlikely.

Yep, I discovered that myself earlier today and was meaning to post an
update, but I seem to have a shortage of round tuits at the moment.

With that change it works fine in IE5+, Gecko and Opera 7.21. I don't
have older Operas installed for testing at the moment.

I tries the padding-bottom but no success in Opera 7.11

I have noticed that the footer is in the correct position if you hit the
back button and then return to the page!
David

"David Graham" <david.graham18 (AT) ntlworld (DOT) com> wrote

"Steve Pugh" <steve (AT) pugh (DOT) net> wrote in message
news:4qt4rvcqqmdfvlartludbdthf6fk4glq18 (AT) 4ax (DOT) com...
Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote:
In article Steve Pugh wrote:

http://steve.pugh.net/test/test62.html

Works just fine in IE5+ and Gecko based browsers. Positions the
footer
just below the window bottom in Opera, which is very annoying but
could probably be worked around.

Opera correctly collapses margins, so you need to use bottom padding
for
content. (99% of times when you have broken design on Opera or Mozilla
and can't find it, it is margin collapsing - in this case margin is
collapsed outside HTML element content area.)

Replace this line with
#content {margin-left: 150px; margin-bottom: 20px; height: auto;}
with
#content {margin-left: 150px; padding-bottom: 20px; height: auto;}

Not tested if it breaks on other browsers, but I think it is pretty
unlikely.

Yep, I discovered that myself earlier today and was meaning to post an
update, but I seem to have a shortage of round tuits at the moment.

With that change it works fine in IE5+, Gecko and Opera 7.21. I don't
have older Operas installed for testing at the moment.

I tries the padding-bottom but no success in Opera 7.11
I have noticed that the footer is in the correct position if you hit the
back button and then return to the page!
David
BTW - this has nothing to do with cache problems - it behaved like that

before the padding fix. I would like to know what the logic is behind this
'fix'. Surely, if margins are collapsing, wouldn't that result in the footer
moving up the viewport?
David

In article David Graham wrote:

I would like to know what the logic is behind this 'fix'. Surely, if
margins are collapsing, wouldn't that result in the footer moving up
the viewport?

Hm. No, I think.

HTML/BODY element is 100% height of viewport as specified. So as margins
collapse, it makes canvas bigger than 100% of viewport as margin is
added. So scrollbar is as spec says.

It is not specified how collapsed margins and absolute positioning
behave. As margin is actually margin of inner block, it makes some sence
to count bottom from point after it. I can't see any interpretation which
would make more sence.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

"Lauri Raittila" <lauri (AT) raittila (DOT) cjb.net> wrote

In article David Graham wrote:

I would like to know what the logic is behind this 'fix'. Surely, if
margins are collapsing, wouldn't that result in the footer moving up
the viewport?

Hm. No, I think.

HTML/BODY element is 100% height of viewport as specified. So as margins
collapse, it makes canvas bigger than 100% of viewport as margin is
added. So scrollbar is as spec says.

I think I don't understand how you are using the 'margins collapse' part of
your reply. I understand this to refer to the way in which the distance
between elements is calculated when they both have a margin set in the
vertical direction

example <p id="first">some text</p>
<p id="second">some more text</p>

and in the css

#first {margin-bottom: 10px; border: solid 2px red;}
#second {margin-top: 5px; border: solid 2px blue;}

There would be a gap of 10px between the two paragraphs and not 15px because
vertical margins collapse and not add - if my interpretation is correct,
then how does:

'So as margins collapse, it makes canvas bigger than 100% of viewport as
margin is added'


- support your answer.

It is not specified how collapsed margins and absolute positioning
behave. As margin is actually margin of inner block, it makes some sence
to count bottom from point after it. I can't see any interpretation which
would make more sence.

Sorry Lauri - I need a little more help with what you mean by this.

David

"David Graham" <david.graham18 (AT) ntlworld (DOT) com> wrote

"Lauri Raittila" <lauri (AT) raittila (DOT) cjb.net> wrote in message
news:MPG.1a20803cdd53b33f989d23 (AT) news (DOT) cis.dfn.de...
In article David Graham wrote:

I would like to know what the logic is behind this 'fix'. Surely, if
margins are collapsing, wouldn't that result in the footer moving up
the viewport?

Hm. No, I think.

HTML/BODY element is 100% height of viewport as specified. So as margins
collapse, it makes canvas bigger than 100% of viewport as margin is
added. So scrollbar is as spec says.

I think I don't understand how you are using the 'margins collapse' part
of
your reply. I understand this to refer to the way in which the distance
between elements is calculated when they both have a margin set in the
vertical direction

example <p id="first">some text</p
p id="second">some more text</p

and in the css

#first {margin-bottom: 10px; border: solid 2px red;}
#second {margin-top: 5px; border: solid 2px blue;}

There would be a gap of 10px between the two paragraphs and not 15px
because
vertical margins collapse and not add - if my interpretation is correct,
then how does:

'So as margins collapse, it makes canvas bigger than 100% of viewport as
margin is added'

The link below is quite useful - it outlines bugs in Opera

http://nontroppo.org/wiki/Opera7CSSIssues

OT - There is an example that may be of interest relating to margins and
float
http://www.suziperry.utvinternet.ie/...rgin_issue.htm

David