138403 - text-align:left; for submit Button does not work

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P2)

Description

[mozilla]

The text-align:left; for a submit Button does not work.
The Text in the button is still centered.
In IE 6.0 it works correctly.
Ciao
  Peter Schütt

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The CSS spec doesn't have a model that describes the rendering of form controls,
so any application of CSS properties to form controls is an extension of CSS.

Anyway, ->HTML Form Controls.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Attachment: testcase

Comment 3

[Boris Zbarsky [:bzbarsky]]

Note that for <input type="submit"> I don't think we actually want to fix this....

Comment 4

[Boris Zbarsky [:bzbarsky]]

*** Bug 217742 has been marked as a duplicate of this bug. ***

Comment 5

[marcov]

text-align only applies to block-level elements(I got that from url below, and
that seems to be correct), 

http://archivist.incutio.com/viewlist/css-discuss/21337

however, adding display: block; to the css stylesheet for the id doesn't help
either.

(css:

#submit {

		width: 150px;
                text-align: left;
		display: block;
	
	}

html: <input name="name1" id="submit" title="test" type="submit" value="bla">

Comment 6

[marcov]

If the "width 150px" property in my codefragment is removed, it does do text-align.

It seems that the width property forces centering

Comment 7

[Logan Ingalls]

Attachment: Full testcase

To me, it doesn't look display:block makes this work.  Text-align must be
totally forced.

Comment 8

[Martijn Wargers (dead)]

*** Bug 265584 has been marked as a duplicate of this bug. ***

Comment 9

[Christian Lißner]

Attachment: No alignments in <button> tags

Not only the <input type="submit"> button ist affected, but also <button> tags.

A workaround for this would be to use <div> tags inside the buttons that do the
alignment. But in my optinion, this is no good solution.

Consider a situation where you define a style sheet class for your buttons with
a right aligned background image (that's working well). Your text should be
aligned left then. It's not possible with a pure CSS class.

Look at the attachment for an example.

Comment 10

[Nickolay_Ponomarev]

*** Bug 276725 has been marked as a duplicate of this bug. ***

Comment 11

[marja]

I used align=start and pack=start for the button and I could see those settings
in DOM both for the button and the hbox holding the label. Also I set
-moz-box-align and -moz-box-pack to start.In addition I used text-align:left for
the button (that was my first guess for the problem). 
--> In DOM button still has text-align:center

Only after I created the following rule it worked (!important may be unnecessary):
.mybuttonclass > .button-box > .button-text {
  text-align:left !important;
}

1) But user's should not have to know the inside button classes.

2) And there should be a clear definition somewhere in which order
-moz-box-align/pack, align/pack and text-align works. It is really confusing now.

3) I wonder if you can define in xbl that label inherits text-align style from
button.

Marja

Comment 12

[marja]

Attachment: align,pack,text-align do not work when aligning <button> label to left

Here is a xul example that mostly does not work when trying to align <button>
label to left. I use Classic theme.

Problem is probably in button xbl definition.

Comment 13

[Martijn Wargers (dead)]

Attachment: testcase5

Comment 14

[Martijn Wargers (dead)]

Attachment: patch

Well, this makes Mozilla behave the same as IE6 and Opera8.

Comment 15

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 187423 [details] [diff] [review]
patch

r+sr=bzbarsky; this should be pretty safe, but could use website compat
testing, so it'd be nice to get this into 1.8b3...

Comment 16

[Martijn Wargers (dead)]

Checked in (by timeless).

Comment 17

[Alexej Dischenko]

If min-width applied to a submit button, text is aligned to left. I
ts too cannot be changed by CSS.
text-align:center, text-align:right does not work.

Comment 18

[Martijn Wargers (dead)]

(In reply to comment #17)
> If min-width applied to a submit button, text is aligned to left. I
> ts too cannot be changed by CSS.
> text-align:center, text-align:right does not work.
Could you attach a testcase? Or even better, could you file a new bug and
mention the bug number here?

Comment 19

[Peter van der Woude [:Peter6]]

(In reply to comment #18)
> (In reply to comment #17)
> > If min-width applied to a submit button, text is aligned to left. I
> > ts too cannot be changed by CSS.
> > text-align:center, text-align:right does not work.
> Could you attach a testcase? Or even better, could you file a new bug and
> mention the bug number here?
> 
Bug 312880