[BLOCK-H]CENTER element doesn't work on block elements

VERIFIED FIXED in M18

Status

()

Core
Layout
P2
normal
VERIFIED FIXED
18 years ago
18 years ago

People

(Reporter: Keith Lesch, Assigned: dbaron)

Tracking

({html4})

Trunk
x86
Windows NT
html4
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [nsbeta2-]nsbeta3+)

Attachments

(3 attachments)

(Reporter)

Description

18 years ago
It makes sense that a normal DIV would not need to be centered.  However I have 
not been able to figure how to center a DIV that is only 50% wide.  Testcase is 
coming.
(Reporter)

Comment 1

18 years ago
Created attachment 7945 [details]
Two testcases that do not center a DIV

Comment 2

18 years ago
confirming using M15 on WinNT (build id: 2000041805).

ie 5.x centers the divs as intended.

bug 23116 and bug 36022 may be related
(they both refer to centering inline tables)
Status: UNCONFIRMED → NEW
Ever confirmed: true
(Assignee)

Comment 3

18 years ago
It may be that the CENTER element should center the DIV.  However, text-align:
center should not.

Comment 4

18 years ago
er, okay. but given that <center> is not legal html4 and the align attribute is
deprecated, how should one deal with <div> centering via css?

(i plead total ignorance on this one :-)
(Assignee)

Comment 5

18 years ago
To center a div with class ctr:

div.ctr { margin-left: auto; margin-right: auto; }
(Reporter)

Comment 6

18 years ago
Which one of those (or both?) margin settings are not "auto" automatically to 
begin with?  Had to use that word twice in a sentence...

According to the specs (link below), it looks to me like if the DIV is set to 
display:block; then it should center with text-align:center;.  Let me know what 
you think...  (Not to mention that although what you mentioned here works for 
centering, I don't think it is what the average developer would come up with as 
a solution :-)

http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align
(Assignee)

Comment 7

18 years ago
> Which one of those (or both?) margin settings are not "auto" automatically to 
> begin with?  Had to use that word twice in a sentence...

Neither.  However, if box properties are overconstrained (i.e., neither margin
nor width is auto), then margin-right is ignored.  This happens when width is
set to some non-auto value.

> According to the specs (link below), it looks to me like if the DIV is set to 
> display:block; then it should center with text-align:center;.  Let me know
> what you think...  (Not to mention that although what you mentioned here works
> for centering, I don't think it is what the average developer would come up
> with as a solution :-)

What in the specs makes you think that?  The part you cite very clearly says the
opposite - that only the line boxes should be centered.  Section 10.3.3 defines
when a block *should* be centered.
(Reporter)

Comment 8

18 years ago
Okay, that was a mis-read on my part.  Sorry, I looked at it again and I 
understand.  So does anything need to get changed here or do I just need to 
remember this is how to center a DIV?
(Assignee)

Comment 9

18 years ago
It may be that the way the CENTER element works should be changed a bit.  I'm
not sure...

Comment 10

18 years ago
Changed the title to "CENTER doesn't work on block elements" from "Cannot center 
a DIV that is a limited width". Reassigned to buster.
Assignee: pierre → buster
Summary: Cannot center a DIV that is a limited width → CENTER doesn't work on block elements

Comment 11

18 years ago
Created attachment 8386 [details]
testcase
(Note that the width:50% on the SPAN and STRONG elements in that test case are
correctly ignored by Mozilla.)
Blocks: 7954
Keywords: html4
Summary: CENTER doesn't work on block elements → CENTER element doesn't work on block elements

Comment 13

18 years ago
discussed with Marc, he'll take a look at mapping auto-margins into the style 
context of immediate children of the <CENTER> as a possible remedy.
Assignee: buster → attinasi
(Assignee)

Comment 14

18 years ago
Might an easier solution be to make blocks respect -moz-center (which I think is
a value of text-align)?  This would also work for descendants that are not
children.  (I think -moz-center works correctly on tables these days...)

Comment 15

18 years ago
Looking into what is happening...
Status: NEW → ASSIGNED

Comment 16

18 years ago
Interesting statement in the HTML 4.01 spec:

"The CENTER element is exactly equivalent to specifying the DIV element with the 
align attribute set to "center". The CENTER element is deprecated."

So, I created a testcase that does the substitution and it shows that we are not 
centering the DIV. This might be a more general problem than the <center< tag.

Comment 17

18 years ago
Created attachment 9075 [details]
Comparson of <center> and <div align=center>

Comment 18

18 years ago
I tried mapping <center> (and align=center on a DIV) to auto-margins and it is 
not the correct solution. Here's why: margins are not inherited so we don;t 
center all of the contexts of the <center> block (or all of the contexnts of a 
div with align=center). It looks like layout really does need to honor the 
text-align property, at least for values NS_STYLE_TEXT_ALIGN_MOZ_CENTER and 
NS_STYLE_TEXT_ALIGN_MOZ_RIGHT.

This also seems to be a pretty important bug: not being able to center blocks 
using the <center> tag, and not being able to center a div using the 
align=center attribute seems like it will break a lot of pages, no?

This bug should probably go back to Layout... 

Comment 19

18 years ago
Steve, sorry to say but it looks like we are going to need to honor -moz-center 
in block frames: that will get the <center> problem fixed and will also fix the 
related problem where <DIV align=center> is not being centered. Please see my 
comments on why auto-margins is not a viable solution here...

I know you don't have enough to do these day anyway, so this bug should be 
welcome ;)
Assignee: attinasi → buster
Status: ASSIGNED → NEW

Updated

18 years ago
Status: NEW → ASSIGNED
Priority: P3 → P2
Nom. nsbeta2, recc. nsbeta2+, falling through to nsbeta3 hard stop if not fixed 
during nsbeta2. Centering of block elements is a widely used text effect on the 
web, and we need to enable this do be done. This is b.c. with widely-used html32 
tags.
Keywords: nsbeta2, nsbeta3

Comment 21

18 years ago
Putting on [nsbeta2+][w/b minus on 6/15] radar.
Whiteboard: [nsbeta2+][w/b minus on 6/15]

Comment 22

18 years ago
PDT:  please leave nsbeta2+.

Per ------- Additional Comments From ekrock@netscape.com 2000-06-12 15:01 -------

"Nom. nsbeta2, recc. nsbeta2+, falling through to nsbeta3 hard stop if not fixed 
during nsbeta2. 

(particularly:ckritzer)

Centering of block elements is a widely used text effect on the 
web, and we need to enable this do be done. This is b.c. with widely-used html32 
tags."

Comment 23

18 years ago
the place to look for this is nsBlockReflowContext::AlignBlockHorizontally().  I 
would expect the right margin to be auto, in which case we could do something 
like what is currently done now only for tables.  But the right margin is coming 
back as *not* auto, but instead the difference between 
(available_space - (x_offset+width)).  I don't know why this is the case.  Per 
CSS-2, centering should be achieved by balancing left and right auto margins.  
But the code shows that's not always the case, since it does special math for 
tables.

Comment 24

18 years ago
6/15 has passed, and so this bug was supposed to get a straight nsbeta2 minus.
Since there is a comment above requesting reconsideration, I've just deleteded 
the status, and will let the PDT/bug-triage re-evaluate in light of the 
assertion that this will break many sites.
Whiteboard: [nsbeta2+][w/b minus on 6/15]
(Assignee)

Comment 25

18 years ago
Marking M17, if we're still thinking about this for beta2.
Component: Style System → Layout
Summary: CENTER element doesn't work on block elements → [BLOCK-H]CENTER element doesn't work on block elements
Target Milestone: --- → M17

Comment 26

18 years ago
nsbeta2-
Whiteboard: [nsbeta2-]
(Assignee)

Comment 27

18 years ago
Stealing this, since I'm working on it.

See also bug 18545.
Assignee: buster → dbaron
Status: ASSIGNED → NEW
(Assignee)

Updated

18 years ago
Status: NEW → ASSIGNED
(Assignee)

Updated

18 years ago
Target Milestone: M17 → M18
(Assignee)

Comment 28

18 years ago
I just attached a proposed fix for this bug to bug 40038.  It still needs a bit
more testing.

Comment 29

18 years ago
Approving for nsbeta3: CENTER has to work, David has a patch, and it is a  
moderately localized layout change.
Keywords: correctness
Whiteboard: [nsbeta2-] → [nsbeta2-]nsbeta3+
(Assignee)

Comment 30

18 years ago
Fix checked in, 2000-07-27 16:37 PDT.
Status: ASSIGNED → RESOLVED
Last Resolved: 18 years ago
Resolution: --- → FIXED

Comment 31

18 years ago
Using original testcase with 8/25 build, verified fixed. 'Center' is centering 
the element and text-align: center is centering the text. If you take the CENTER 
tags out of the first div, text is still centered but element is not.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.