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

RESOLVED FIXED in Future

Status

()

Core
Layout: Form Controls
P2
normal
RESOLVED FIXED
16 years ago
7 years ago

People

(Reporter: mozilla, Assigned: Martijn Wargers (dead))

Tracking

({testcase})

Trunk
Future
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments, 1 obsolete attachment)

(Reporter)

Description

16 years ago
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
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.
Assignee: dbaron → rods
Component: Style System → HTML Form Controls
QA Contact: ian → tpreston
Created attachment 80159 [details]
testcase
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows NT → All
Hardware: PC → All

Updated

16 years ago
Status: NEW → ASSIGNED
Priority: -- → P2
Target Milestone: --- → Future

Updated

15 years ago
Keywords: testcase
Depends on: 26650
Note that for <input type="submit"> I don't think we actually want to fix this....
*** Bug 217742 has been marked as a duplicate of this bug. ***

Comment 5

14 years ago
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

14 years ago
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

13 years ago
Created attachment 157642 [details]
Full testcase

To me, it doesn't look display:block makes this work.  Text-align must be
totally forced.
Attachment #80159 - Attachment is obsolete: true

Updated

13 years ago
Assignee: rods → nobody
Status: ASSIGNED → NEW
QA Contact: tpreston → core.layout.form-controls
(Assignee)

Comment 8

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

Comment 9

13 years ago
Created attachment 168210 [details]
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.

Updated

13 years ago
Attachment #168210 - Attachment description: No aligments in <button> tags → No alignments in <button> tags

Comment 10

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

Comment 11

13 years ago
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

13 years ago
Created attachment 175154 [details]
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.
(Assignee)

Comment 13

13 years ago
Created attachment 187421 [details]
testcase5
(Assignee)

Comment 14

13 years ago
Created attachment 187423 [details] [diff] [review]
patch

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

Updated

13 years ago
Attachment #187423 - Flags: review?(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...
Attachment #187423 - Flags: superreview+
Attachment #187423 - Flags: review?(bzbarsky)
Attachment #187423 - Flags: review+
Attachment #187423 - Flags: approval1.8b3?

Updated

13 years ago
Attachment #187423 - Flags: approval1.8b3? → approval1.8b4+
(Assignee)

Comment 16

13 years ago
Checked in (by timeless).
Status: NEW → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → FIXED

Comment 17

12 years ago
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.
(Assignee)

Comment 18

12 years ago
(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?
(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

Updated

7 years ago
Assignee: nobody → martijn.martijn
You need to log in before you can comment on or make changes to this bug.