How to center vertically ?

DU · Jul 20 '05, 09:36 PM

Re: How to center vertically ?

Lauri Raittila wrote:[color=blue]
> In article e n | c k m a wrote:
>[color=green][color=darkred]
>>>but I'm trying to center vertically a box, any idea to solve this?[/color]
>>
>>can't be done without some kind of client-side scripting language
>>(JavaScript ) - as far as I know.[/color]
>
>
> That is totally untrue. CSS has many ways to do that.
> http://www.student.oulu.fi/~laurirai/www/css/middle/
>
> The problem is that IE has so little support for things. Min-height is
> pretty much crusial when using different unit for centered element and
> paret. There is workarounds for it though.
>[/color]

Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element (the initial containing block is the containing block
of such abs. pos. element; that's clearly, word for word, explained in
section 10.1 of CSS2

Visual formatting model details

http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

). Now, the root element is not the browser viewport; it's the document
per se. So, Opera 7.x renders your case correctly: it is MSIE 6, Mozilla
and others which renders this wrong. I can document this with quotes
from W3C CSS2 and W3C CSS2.1. W3C also consistently repeats that the
positioning context for fixed elements is the viewport; that is NOT the
case for absolute positioning. Same with bugzilla:
"Bug 105286: viewport used as containing block for absolutely positioned
elements instead of root (percentage height, %, bottom)"

105286 - viewport used as containing block for absolutely positioned elements instead of root (percentage height, %, bottom)

http://bugzilla.mozilla.org/show_bug.cgi?id=105286

VERIFIED (layout.r-and-a-pos) in Core - Layout: Positioned. Last updated 2008-07-31.

The addendum works for Mozilla 1.6, Opera 7.50 with or without non-abs.
positioned elements before and/or after the Container div. It works even
if the positioned Container div becomes wider/longer than the viewport.

DU
-------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head profile="http://www.ietf.org/rfc/rfc2731.txt">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="DC.subjec t" content="Center vertically a box">
<meta name="DC.date.c reated" content="2004-02-02T09:54:03+11: 00"
scheme="W3CDTF" >
<meta name="DC.date.m odified" content="2004-02-02T09:54:03+11: 00"
scheme="W3CDTF" >

<title>Center vertically a box in the viewport</title>

<style type="text/css" media="screen,t v,projection">
#TheBoxToCenter Vertically
{
width:356px;
height:124px;
background-color:yellow;
}

#Container
{
position:fixed;
/* no hack for MSIE for now */
top:50%;
left:50%;
margin-top:-62px;
margin-left:-178px;
}
</style>

</head>

<body>

fillerfillerfillerfillerfillerfillerfiller
fillerfillerfillerfillerfillerfillerfiller
fillerfillerfillerfillerfillerfillerfiller
fillerfillerfillerfillerfillerfillerfiller
<div id="Container" >
<div id="TheBoxToCen terVertically"> inline or block stuff here</div>
</div>
fillerfillerfillerfillerfillerfillerfiller
fillerfillerfillerfillerfillerfillerfiller
fillerfillerfillerfillerfillerfillerfiller
fillerfillerfillerfillerfillerfillerfiller

</body></html>

**Franois de Dardel** · Jul 20 '05, 09:36 PM

Re: How to center vertically ?

On 2004-02-05 14:48:28 +0100, Els <els.aGEENSPAM@ tiscali.nl.inva lid> said:
[color=blue][color=green][color=darkred]
> >>>>but I'm trying to center vertically a box, any idea to solve this?[/color][/color]
> example:
> http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
> css: http://www.mediatech.nl/~rachel/Rachel/bp.css
>
> -- Els
> Mente humana é como pára-quedas; funciona melhor aberta.[/color]

I like your Portuguese signature, els.

But your Etretat page is not centered vertically. Not in my setup anyway
(1024 x 820). If I increase it to 1280 x 1024, I can see the whole window,
but the pict is still not vertically centered.

Macintosh, Safari or Netscape 7.1.

François de Dardel
http:/mapage.noos.fr/dardelf
Faber est suae quisque fortunae
Remove fourteen to reply
Enlever le quatorze

**Lauri Raittila** · Jul 20 '05, 09:36 PM

Re: How to center vertically ?

In article DU wrote:[color=blue]
> Lauri Raittila wrote:[color=green]
> >CSS has many ways to do [vertical centering].
> > http://www.student.oulu.fi/~laurirai/www/css/middle/[/color][/color]
[color=blue]
> Your page is interesting. Your last section is wrong though. When one
> abs. pos. a child element of the body, the positioning element becomes
> the root element[/color]

I don't use absolute position relative to body on that page, so I wonder
what you mean. In fact, container is always relatively positioned, so ICB
confusion is not needed to be considered. If you use absolute position
way to center things in body, you of course also use height:100%, so that
it will take height of viewport (OTOH, it is arguable if 100% should be
height of viewport - but I have already forgotten if I was against or for
that, would need to read specs again.)

I wonder why everybody always think that vertical centering is only used
related to viewport. IMHO it hardly ever makes sence to center something
on viewport (even if I have pointed out how to do it many times). I have
no idea weather OP meaned it or not as OP didn't say.
[color=blue]
> Now, the root element is not the browser viewport;[/color]

That is clear.
[color=blue]
> it's the document per se. So, Opera 7.x renders your case correctly:
> it is MSIE 6, Mozilla and others which renders this wrong. I can
> document this with quotes from W3C CSS2 and W3C CSS2.1. W3C also
> consistently repeats that the positioning context for fixed elements
> is the viewport; that is NOT the case for absolute positioning. Same
> with bugzilla: "Bug 105286: viewport used as containing block for
> absolutely positioned elements instead of root (percentage height,
> %, bottom)"
> http://bugzilla.mozilla.org/show_bug.cgi?id=105286
>
> The addendum works for Mozilla 1.6, Opera 7.50 with or without non-abs.
> positioned elements before and/or after the Container div.[/color]
[color=blue]
> It works even
> if the positioned Container div becomes wider/longer than the viewport.[/color]

You mean the thing is centered, but part of it will be outside canvas.
Canvas meaning area you can see using scrollbars. That is IMNSHO very
stupid indeed. It would be much better if centering would not happen when
centered thing is longer than viewport. I would use display:table method,
as if browser don't understand min-width, it will still work, or degrade
nicely.

Anyway, you should use max-height:100% and overflow:auto with
position:fixed elements, so that content would not be unaccessible.

--
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.

DU · Jul 20 '05, 09:36 PM

Re: How to center vertically ?

Lauri Raittila wrote:
[color=blue]
> In article DU wrote:
>[color=green]
>>Lauri Raittila wrote:
>>[color=darkred]
>>>CSS has many ways to do [vertical centering].
>>>http://www.student.oulu.fi/~laurirai/www/css/middle/[/color][/color]
>
>
>[color=green]
>>Your page is interesting. Your last section is wrong though. When one
>>abs. pos. a child element of the body, the positioning element becomes
>>the root element[/color]
>
>
> I don't use absolute position relative to body on that page, so I wonder
> what you mean.[/color]

This is your last section:
"Using absolute positioning and negative margin"
no?

In fact, container is always relatively positioned, so ICB[color=blue]
> confusion is not needed to be considered. If you use absolute position
> way to center things in body, you of course also use height:100%, so that
> it will take height of viewport (OTOH, it is arguable if 100% should be
> height of viewport - but I have already forgotten if I was against or for
> that, would need to read specs again.)[/color]

height:100% for an abs. pos. element which is a child of the body is
relative to the document (root element), not the viewport. Again,
section 10.1 of CSS2.1 is utterly clear on what is implied for abs. pos.
elements.
[color=blue]
>
> I wonder why everybody always think that vertical centering is only used
> related to viewport.[/color]

Well, I fail to see what usage you could find in positioning an element
in the middle of the document (when the document overflows the
viewport). That would mean that sometimes you see the positioned
element, sometimes you don't; you would need to scroll down/up the
document view to see that abs. pos.

IMHO it hardly ever makes sence to center something[color=blue]
> on viewport (even if I have pointed out how to do it many times).[/color]

You can replace frames entirely with positioning relative to viewport.
Sidebar, footer, fixed nav. blocks etc... are doable without any frames.

I have[color=blue]
> no idea weather OP meaned it or not as OP didn't say.
>
>[color=green]
>>Now, the root element is not the browser viewport;[/color]
>
>
> That is clear.
>
>[color=green]
>>it's the document per se. So, Opera 7.x renders your case correctly:
>>it is MSIE 6, Mozilla and others which renders this wrong. I can
>>document this with quotes from W3C CSS2 and W3C CSS2.1. W3C also
>>consistentl y repeats that the positioning context for fixed elements
>>is the viewport; that is NOT the case for absolute positioning. Same
>>with bugzilla: "Bug 105286: viewport used as containing block for
>>absolutely positioned elements instead of root (percentage height,
>>%, bottom)"
>>http://bugzilla.mozilla.org/show_bug.cgi?id=105286
>>
>>The addendum works for Mozilla 1.6, Opera 7.50 with or without non-abs.
>>positioned elements before and/or after the Container div.[/color]
>
>[color=green]
>>It works even
>>if the positioned Container div becomes wider/longer than the viewport.[/color]
>
>
> You mean the thing is centered, but part of it will be outside canvas.
> Canvas meaning area you can see using scrollbars.[/color]

W3C does not define canvas in that manner. What you say is not clear. Say:
div#idText {position:absol ute; top:-250px; left:-500px;}
Now, this idText won't be reachable, accessible with scrollbars:
depending on your definition of canvas, you would say that this idText
is not part of the canvas since you can't reach it with scrollbars while
the W3C says: "the space where the formatting structure is rendered; the
canvas is infinite for each dimension of the space."
"The canvas is the entire 'surface' on which the document is laid out."
So, I'm not sure why this idText would not part of the canvas the way
W3C defines it.

That is IMNSHO very[color=blue]
> stupid indeed. It would be much better if centering would not happen when
> centered thing is longer than viewport. I would use display:table method,
> as if browser don't understand min-width, it will still work, or degrade
> nicely.
>
> Anyway, you should use max-height:100% and overflow:auto with
> position:fixed elements, so that content would not be unaccessible.
>
>[/color]

overflow:auto makes sense but I fail to see why max-height is needed or
height:100% is needed. The demopage I provided works and it works IMO
according to the way W3C defined position:absolu te, containing blocks
and position:fixed.

DU

**Els** · Jul 20 '05, 09:36 PM

Re: How to center vertically ?

Franois de Dardel wrote:[color=blue]
> On 2004-02-05 14:48:28 +0100, Els <els.aGEENSPAM@ tiscali.nl.inva lid> said:
>[color=green][color=darkred]
>> >>>>but I'm trying to center vertically a box, any idea to solve this?[/color]
>> example:
>> http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
>> css: http://www.mediatech.nl/~rachel/Rachel/bp.css
>>[/color]
> But your Etretat page is not centered vertically. Not in my setup anyway
> (1024 x 820). If I increase it to 1280 x 1024, I can see the whole
> window, but the pict is still not vertically centered.
>
> Macintosh, Safari or Netscape 7.1.[/color]

It is here, (pc), I don't have a Mac to test.
Could you please make a printscreen for me and upload it
somewhere or send it to me?

I'd be grateful :-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.
Another one, for François:
Sonhos vem. Sonhos vão. O resto é imperfeito.
-Renato Russo-

**PeterMcC** · Jul 20 '05, 09:36 PM

Re: How to center vertically ?

DU <drunclear@hotW IPETHISmail.com > wrote in
<bvu4p5$lhu$1@n ews.eusc.inter. net>
[color=blue]
> Sorry about that.[/color]

No, my misunderstandin g :)
[color=blue]
> That page
> http://www.wpdfd.com/editorial/thebox/deadcentre4.html
> by the way has a problem. Every div in that page is absolutely
> positioned and won't work accordingly in Opera 7.x. If the page has
> non-abs. pos. elements before and after the centered div, then it
> won't work in opera 7.x. In any case, the problem is that both MSIE 6
> and Mozilla have a bug on abs. pos. elements:
>
> "Bug 105286: viewport used as containing block for absolutely
> positioned elements instead of root (percentage height, %, bottom)"
> http://bugzilla.mozilla.org/show_bug.cgi?id=105286
>
> "A positioned element should be positioned to the nearest containing
> positioned element, not the containing element."
> http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
> "The containing block for a positioned box is established by the
> nearest positioned ancestor (or, if none exists, the initial
> containing block)"
>
> So an abs. pos. child of the body element should be positioned
> regarding the document, not the viewport according to W3C. AFAIK,
> only Opera 7.x avoids this bug.
>
> My solution (with position:fixed) will work for Opera 7.x and
> Mozilla-based browsers and it will work if the document (or positioned
> div) exceeds browser viewport dimensions.[/color]

I'll revisit it and try it out though I'll confess that I suspect that there
isn't a satisfactory solution - principally because, if there were, there'd
be thousands of sites out there crippling their content and function for the
sole benefit of floating in the middle of the window.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

**Lauri Raittila** · Jul 20 '05, 09:37 PM

Re: How to center vertically ?

In article DU wrote:[color=blue]
> Lauri Raittila wrote:
>[color=green]
> > In article DU wrote:
> >[color=darkred]
> >>Lauri Raittila wrote:
> >>
> >>>CSS has many ways to do [vertical centering].
> >>>http://www.student.oulu.fi/~laurirai/www/css/middle/[/color]
> >[color=darkred]
> >>Your page is interesting. Your last section is wrong though. When one
> >>abs. pos. a child element of the body, the positioning element becomes
> >>the root element[/color]
> >
> >
> > I don't use absolute position relative to body on that page, so I wonder
> > what you mean.[/color]
>
> This is your last section:
> "Using absolute positioning and negative margin"
> no?[/color]

No. There is div with position:relati ve that contains absolutely
positioned element. The absolutely positioned element is positioned
relative to that div. So weather we agree on how ICB is handled is
irrelevant.
[color=blue][color=green]
> > I wonder why everybody always think that vertical centering is only used
> > related to viewport.[/color]
>
> Well, I fail to see what usage you could find in positioning an element
> in the middle of the document (when the document overflows the
> viewport). That would mean that sometimes you see the positioned
> element, sometimes you don't; you would need to scroll down/up the
> document view to see that abs. pos.[/color]

Why on earth it should be positioned middle of document? That would be
even dumber. What I mean is that you sometimes have reason to have
something positioned in the middle of some fixed height element.

Think that you have background image that looks good at some height. You
propably want to position text in the middle of it.
[color=blue]
> IMHO it hardly ever makes sence to center something[color=green]
> > on viewport (even if I have pointed out how to do it many times).[/color]
>
> You can replace frames entirely with positioning relative to viewport.
> Sidebar, footer, fixed nav. blocks etc... are doable without any frames.[/color]

I can see no reason to do that in first place. Replacing frames with
similar stuff is almost as bad idea as frames per se. Often worse.
[color=blue][color=green]
> > You mean the thing is centered, but part of it will be outside canvas.
> > Canvas meaning area you can see using scrollbars.[/color]
>
> W3C does not define canvas in that manner. What you say is not clear. Say:
> div#idText {position:absol ute; top:-250px; left:-500px;}
> Now, this idText won't be reachable, accessible with scrollbars:
> depending on your definition of canvas, you would say that this idText
> is not part of the canvas since you can't reach it with scrollbars while
> the W3C says: "the space where the formatting structure is rendered; the
> canvas is infinite for each dimension of the space."
> "The canvas is the entire 'surface' on which the document is laid out."
> So, I'm not sure why this idText would not part of the canvas the way
> W3C defines it.[/color]

I don't care how W3 defines it. It still is inaccessible. I defined
canvas myself exactly because I didn't mean it the way W3 does it.
[color=blue]
> overflow:auto makes sense but I fail to see why max-height is needed or
> height:100% is needed.[/color]

Well, if you centered thing is bigger than viewport, it doesn't not help
to have scrollbar in it, as it still is bigger than viewport.
[color=blue]
> The demopage I provided works and it works IMO
> according to the way W3C defined position:absolu te, containing blocks
> and position:fixed.[/color]

Yes it does. That no way means it is not problem. Just because something
is rendered correctly by spec does not mean it makes some sence.

I think you are misunderstood everything I have said because you have so
strong opinion that my understanding of ICB is wrong. The problem is that
question about ICB is irrelevant when talking about my page.

And your example is simply unaccessible in not high enaugh window. Of
course in your example it is not really problem, as centered element is
not very tall. But potential problem is big. Think that someone takes
your example and actually uses it to position her 82 line poem in the
middle of page. Then think someone using big fonts and relatively low
window.

--
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.

DU · Jul 20 '05, 09:37 PM

Re: How to center vertically ?

Lauri Raittila wrote:[color=blue]
> In article DU wrote:
>[color=green]
>>Lauri Raittila wrote:
>>
>>[color=darkred]
>>>In article DU wrote:
>>>
>>>
>>>>Lauri Raittila wrote:
>>>>
>>>>
>>>>>CSS has many ways to do [vertical centering].
>>>>>http://www.student.oulu.fi/~laurirai/www/css/middle/
>>>
>>>>Your page is interesting. Your last section is wrong though. When one
>>>>abs. pos. a child element of the body, the positioning element becomes
>>>>the root element
>>>
>>>
>>>I don't use absolute position relative to body on that page, so I wonder
>>>what you mean.[/color]
>>
>>This is your last section:
>>"Using absolute positioning and negative margin"
>>no?[/color]
>
>
> No. There is div with position:relati ve that contains absolutely
> positioned element. The absolutely positioned element is positioned
> relative to that div. So weather we agree on how ICB is handled is
> irrelevant.
>
>[color=green][color=darkred]
>>>I wonder why everybody always think that vertical centering is only used
>>>related to viewport.[/color]
>>
>>Well, I fail to see what usage you could find in positioning an element
>>in the middle of the document (when the document overflows the
>>viewport). That would mean that sometimes you see the positioned
>>element, sometimes you don't; you would need to scroll down/up the
>>document view to see that abs. pos.[/color]
>
>
> Why on earth it should be positioned middle of document?[/color]

That is what people do in a number of demo pages actually. Because the
document is as long as the viewport, then they assume that abs. pos. is
relative to viewport. Here's one:

Page not found – NonTroppo.org

http://nontroppo.org/test/Op7/position1.html

That would be[color=blue]
> even dumber.[/color]

This is another ball game. Relevancy and/or usage in a webpage context
is a different issue. It seems that right now, you and I do not even
agree that position:absolu te will position a child element of the body
within the document while position:fixed will position a child element
of the body within the viewport. I'm telling you again that the CSS2
technical recommendation is utterly clear, shining clear on this issue.
Opera 7.x gets it right; Mozilla 1.x gets it wrong.

What I mean is that you sometimes have reason to have[color=blue]
> something positioned in the middle of some fixed height element.
>
> Think that you have background image that looks good at some height. You
> propably want to position text in the middle of it.
>
>[color=green]
>>IMHO it hardly ever makes sence to center something
>>[color=darkred]
>>>on viewport (even if I have pointed out how to do it many times).[/color]
>>
>>You can replace frames entirely with positioning relative to viewport.
>>Sidebar, footer, fixed nav. blocks etc... are doable without any frames.[/color]
>
>
> I can see no reason to do that in first place. Replacing frames with
> similar stuff is almost as bad idea as frames per se. Often worse.
>[/color]

That's certainly debatable. Sidebar, footer, nav. blocks fixed in the
viewport are appearing in webpages now. "Authors may use fixed
positioning to create frame-like presentations."

Visual formatting model

http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

The usabilities burden, javascript dependency and problems arisen with
frames (which are well documented) disappear when using
fixed-in-the-viewport blocks. Anyway, this is again another topic.
[color=blue]
>[color=green][color=darkred]
>>>You mean the thing is centered, but part of it will be outside canvas.
>>>Canvas meaning area you can see using scrollbars.[/color]
>>
>>W3C does not define canvas in that manner. What you say is not clear. Say:
>>div#idText {position:absol ute; top:-250px; left:-500px;}
>>Now, this idText won't be reachable, accessible with scrollbars:
>>depending on your definition of canvas, you would say that this idText
>>is not part of the canvas since you can't reach it with scrollbars while
>>the W3C says: "the space where the formatting structure is rendered; the
>>canvas is infinite for each dimension of the space."
>>"The canvas is the entire 'surface' on which the document is laid out."
>>So, I'm not sure why this idText would not part of the canvas the way
>>W3C defines it.[/color]
>
>
> I don't care how W3 defines it. It still is inaccessible. I defined
> canvas myself exactly because I didn't mean it the way W3 does it.
>
>[color=green]
>>overflow:au to makes sense but I fail to see why max-height is needed or
>>height:100% is needed.[/color]
>
>
> Well, if you centered thing is bigger than viewport, it doesn't not help
> to have scrollbar in it, as it still is bigger than viewport.
>
>[color=green]
>>The demopage I provided works and it works IMO
>>according to the way W3C defined position:absolu te, containing blocks
>>and position:fixed.[/color]
>
>
> Yes it does. That no way means it is not problem. Just because something
> is rendered correctly by spec does not mean it makes some sence.
>[/color]

My post was oriented toward how specs distinguish, separate and define
how these position:absolu te and position:fixed should work. Whether web
authors do a fine job of designing a page with such knowledge or not is
a different matter. My post was about specs, not about how design meets
specific webpage requirements.
As far as I'm concerned, many people are still assuming there is a bug
with Opera 7.x and no bug with Mozilla regarding pos. abs. when the
specs (1) and even bugzilla (2) clearly indicate it is not the case.

DU
--
(1)http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
"The containing block for a positioned box is established by the nearest
positioned ancestor (or, if none exists, the initial containing block)"
Also, the explanations and examples given in section 10.1 of CSS2.1 are
shining clear about these important distinctions.
"the box is fixed with respect to the viewport"

Visual formatting model

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

"Fixed positioning is a subcategory of absolute positioning. The only
difference is that for a fixed positioned box, the containing block is
established by the viewport."

Visual formatting model

http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

(2)"Bug 105286: viewport used as containing block for absolutely
positioned elements instead of root (percentage height, %, bottom)"

105286 - viewport used as containing block for absolutely positioned elements instead of root (percentage height, %, bottom)

http://bugzilla.mozilla.org/show_bug.cgi?id=105286

VERIFIED (layout.r-and-a-pos) in Core - Layout: Positioned. Last updated 2008-07-31.

**Lauri Raittila** · Jul 20 '05, 09:37 PM

Re: How to center vertically ?

In article DU wrote:
[color=blue]
> This is another ball game. Relevancy and/or usage in a webpage context
> is a different issue. It seems that right now, you and I do not even
> agree that position:absolu te will position a child element of the body
> within the document while position:fixed will position a child element
> of the body within the viewport. I'm telling you again that the CSS2
> technical recommendation is utterly clear, shining clear on this issue.
> Opera 7.x gets it right; Mozilla 1.x gets it wrong.[/color]

I have used Opera 7 all the time. Well, I only used 7.0 beta 1 for
testing.
[color=blue]
> My post was oriented toward how specs distinguish, separate and define
> how these position:absolu te and position:fixed should work. Whether web
> authors do a fine job of designing a page with such knowledge or not is
> a different matter. My post was about specs, not about how design meets
> specific webpage requirements.[/color]

Yes. You accused that my last case was incorrect:

"Your page is interesting. Your last section is wrong though."

But couldn't point how. You thought that ICB had something to do with it,
but it hasn't.

Your example was not good in practice, and you didn't point it out, so I
did that. I have posted similar example here about 1.5 years ago, and I
didn't understand the problem with it then.
[color=blue]
> As far as I'm concerned, many people are still assuming there is a bug
> with Opera 7.x and no bug with Mozilla regarding pos. abs. when the
> specs (1) and even bugzilla (2) clearly indicate it is not the case.[/color]

I'm not. I think Opera 7 has done this correctly all the time about ICB.
But the problem you see on my site where I say Opera is buggy and mozilla
is not is not about ICB, but absolutely positioned element in relatievly
positioned container, that is defined even clearer.

--
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.

**Karl Smith** · Jul 20 '05, 09:37 PM

Re: How to center vertically ?

DU <drunclear@hotW IPETHISmail.com > wrote:
[color=blue]
> http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
> "The containing block for a positioned box is established by the nearest
> positioned ancestor (or, if none exists, the initial containing block)"
>
> So an abs. pos. child of the body element should be positioned regarding
> the document, not the viewport according to W3C. AFAIK, only Opera 7.x
> avoids this bug.[/color]

That is correct. (Opera avoided this bug by never inventing it, Since
CSS positioning was first included in Opera, they've been the only
ones to get this detail correct.)

But the way you phrase that, by referring to, "an abs. pos. child of
the body," may be misleading. The first element to be absolutely
positioned will be positioned relative to the initial containing box,
not the viewport, but that may be the BODY element or the HTML
element. And if an author assumes that it is the BODY, that assumption
may be wrong.

The initial containing box, IIRC, is the first box in the rendering
model to have a value for "display" other than "none".[1] And the
rendering model is created by reconciling the document tree with the
stylesheet in use. And the stylesheet in use is created by cascading
stylesheets from author, user, and browser.

In plain English, if I have a user stylesheet that always displays the
META tags (I do, BTW), my initial containing box will always be HTML,
never BODY. So, if the author asssumes an initial containing box of
BODY, their absolutely positioned element may be displaced upwards?
Would these be appropriate for authors with a genuine use for absolute
positioning?

html { display: block !important }
head { display: none !important }

[1] Or a value for "content" other than "" (That's content in the
rendering model, not the content of the document model.)???

--
Karl Smith.

DU · Jul 20 '05, 09:37 PM

Re: How to center vertically ?

Lauri Raittila wrote:[color=blue]
> In article DU wrote:
>
>[color=green]
>>This is another ball game. Relevancy and/or usage in a webpage context
>>is a different issue. It seems that right now, you and I do not even
>>agree that position:absolu te will position a child element of the body
>>within the document while position:fixed will position a child element
>>of the body within the viewport. I'm telling you again that the CSS2
>>technical recommendation is utterly clear, shining clear on this issue.
>>Opera 7.x gets it right; Mozilla 1.x gets it wrong.[/color]
>
>
> I have used Opera 7 all the time. Well, I only used 7.0 beta 1 for
> testing.
>
>[color=green]
>>My post was oriented toward how specs distinguish, separate and define
>>how these position:absolu te and position:fixed should work. Whether web
>>authors do a fine job of designing a page with such knowledge or not is
>>a different matter. My post was about specs, not about how design meets
>>specific webpage requirements.[/color]
>
>
> Yes. You accused that my last case was incorrect:
>
> "Your page is interesting. Your last section is wrong though."
>[/color]

I said that this was your last section:

"Using absolute positioning and negative margin"

Is that true? Is this how you described your last section? Yes? No? I
hope I won't need to upload a screen shot ...

[color=blue]
> But couldn't point how. You thought that ICB had something to do with it,
> but it hasn't.
>[/color]

I certainly thought you posted an example of an absolutely positioned
element with a negative margin.
[color=blue]
> Your example was not good in practice, and you didn't point it out, so I
> did that. I have posted similar example here about 1.5 years ago, and I
> didn't understand the problem with it then.
>
>[color=green]
>>As far as I'm concerned, many people are still assuming there is a bug
>>with Opera 7.x and no bug with Mozilla regarding pos. abs. when the
>>specs (1) and even bugzilla (2) clearly indicate it is not the case.[/color]
>
>
> I'm not. I think Opera 7 has done this correctly all the time about ICB.
> But the problem you see on my site where I say Opera is buggy and mozilla
> is not is not about ICB, but absolutely positioned element in relatievly
> positioned container, that is defined even clearer.
>
>
>[/color]

absolutely positioned element in relatievly positioned container: that's
an importantissimo detail here. Yes, said that way and written that way,
it is much clearer.

:)

DU

FL · Jul 20 '05, 09:37 PM

Re: How to center vertically ?

> Hi Everyone,[color=blue]
>
> I know howto center a block using
> margin-left: auto ;
> margin-right: auto ;
>
> but I'm trying to center vertically a box, any idea to solve this?[/color]

Thanks to all of you, now I have a lot of stuff to learn and I'll try
all the given tips but I still consider that W3c should have done
something simpler :-)

**Lauri Raittila** · Jul 20 '05, 09:38 PM

Re: How to center vertically ?

In article DU wrote:[color=blue]
> Lauri Raittila wrote:[color=green]
> > In article DU wrote:
> >
> >
> > Yes. You accused that my last case was incorrect:
> >
> > "Your page is interesting. Your last section is wrong though."
> >[/color]
>
> I said that this was your last section:
>
> "Using absolute positioning and negative margin"
>
> Is that true? Is this how you described your last section? Yes? No? I
> hope I won't need to upload a screen shot ...[/color]

I still fail to see your point.
[color=blue]
> I certainly thought you posted an example of an absolutely positioned
> element with a negative margin.[/color]

Hm. Whats the problem with absolutely positioned thing and negative
margin?

[color=blue][color=green]
> >
> > I'm not. I think Opera 7 has done this correctly all the time about ICB.
> > But the problem you see on my site where I say Opera is buggy and mozilla
> > is not is not about ICB, but absolutely positioned element in relatievly
> > positioned container, that is defined even clearer.
> >
> >
> >[/color]
>
> absolutely positioned element in relatievly positioned container: that's
> an importantissimo detail here. Yes, said that way and written that way,
> it is much clearer.[/color]

Well, it doesn't really make much sence to include all information in
heading. It is made clear in content that it is actually relatively
positioned with container. At least I think it is.

What actually is not as clear is if it should center thing if:

html {height:100%;}
body {height:10em;ma rgin-top:-5em;top:50%;pos ition:absolute}

I think it should be centered.

--
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.

How to center vertically ?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment