Closed Bug 138403 Opened 19 years ago Closed 16 years ago

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

Categories

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

defect

Tracking

()

RESOLVED FIXED
Future

People

(Reporter: mozilla, Assigned: martijn.martijn)

References

Details

(Keywords: testcase)

Attachments

(5 files, 1 obsolete file)

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
Attached file testcase (obsolete) —
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows NT → All
Hardware: PC → All
Status: NEW → ASSIGNED
Priority: -- → P2
Target Milestone: --- → Future
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. ***
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">
If the "width 150px" property in my codefragment is removed, it does do text-align.

It seems that the width property forces centering
Attached file 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
Assignee: rods → nobody
Status: ASSIGNED → NEW
QA Contact: tpreston → core.layout.form-controls
*** Bug 265584 has been marked as a duplicate of this bug. ***
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.
Attachment #168210 - Attachment description: No aligments in <button> tags → No alignments in <button> tags
*** Bug 276725 has been marked as a duplicate of this bug. ***
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
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.
Attached file testcase5
Attached patch patchSplinter Review
Well, this makes Mozilla behave the same as IE6 and Opera8.
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?
Attachment #187423 - Flags: approval1.8b3? → approval1.8b4+
Checked in (by timeless).
Status: NEW → RESOLVED
Closed: 16 years ago
Resolution: --- → FIXED
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.
(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
Assignee: nobody → martijn.martijn
You need to log in before you can comment on or make changes to this bug.