By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,911 Members | 1,177 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,911 IT Pros & Developers. It's quick & easy.

Text align of <input type="submit"> and Mozilla 1.4?

P: n/a
See example at <URL:http://www.cc.jyu.fi/~mira/moz/formtest.php>.

The problem is that the label of submit button is always centered on the
button regardsless of 'text-align' property in CSS. Considering that I
can style everything else, this must be a bug, right?

Any suggestions how to fix the issue with Mozilla 1.4? How about other
versions of Mozilla? How about other browsers?

(I'm aware that some people think that one should never modify rendering
of any form element. No need to tell me that.)

--
Mikko

Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Mikko Rantalainen <mi**@st.jyu.fi> writes:
See example at <URL:http://www.cc.jyu.fi/~mira/moz/formtest.php>.

The problem is that the label of submit button is always centered on
the button regardsless of 'text-align' property in CSS. Considering
that I can style everything else, this must be a bug, right?
Hmm. The <input> is a replaced inline element, which is presumably
aligned _as an element_ according to the spec. The label on the
<input> is a part of the display of the element - IMO it makes as much
sense for text-align to apply to this as it would to text in an
embedded SVG image, or similar.
Any suggestions how to fix the issue with Mozilla 1.4? How about other
versions of Mozilla? How about other browsers?


Graphical submit button? Though they have their own raft of problems,
of course.

--
Chris
Jul 20 '05 #2

P: n/a
Chris Morris wrote:
Mikko Rantalainen <mi**@st.jyu.fi> writes:
See example at <URL:http://www.cc.jyu.fi/~mira/moz/formtest.php>.

The problem is that the label of submit button is always centered on
the button regardsless of 'text-align' property in CSS. Considering
that I can style everything else, this must be a bug, right?


Hmm. The <input> is a replaced inline element, which is presumably
aligned _as an element_ according to the spec. The label on the
<input> is a part of the display of the element - IMO it makes as much
sense for text-align to apply to this as it would to text in an
embedded SVG image, or similar.


May I ask why do you think that input is a replaced inline element? It
might be that Mozilla treats input like one, but I think there's nothing
in the spec suggesting that <input> element should be a replaced
element. Considering that <input type="text"> can be styled to the
bottom of my hearth, I consider it a bug (requiring a workaround) not to
be able to align text of submit button as I like - it would make more
sense to have all form elements as replaced or all elements as styleable.

Any suggestions how to fix the issue with Mozilla 1.4? How about other
versions of Mozilla? How about other browsers?


Graphical submit button? Though they have their own raft of problems,
of course.


I'd rather take an unstyled submit button than a graphic. I'd end up
with all the localization issues in the future plus graphic doesn't
scale when the user is unhappy with the default font size. If I ever
want to change the text, I have to fix both the graphic and the alt
text. Not that much fun...

--
Mikko

Jul 20 '05 #3

P: n/a
Mikko Rantalainen wrote:
Chris Morris wrote:
Mikko Rantalainen <mi**@st.jyu.fi> writes:
See example at <URL:http://www.cc.jyu.fi/~mira/moz/formtest.php>.

The problem is that the label of submit button is always centered on
the button regardsless of 'text-align' property in CSS. Considering
that I can style everything else, this must be a bug, right?

Hmm. The <input> is a replaced inline element, which is presumably
aligned _as an element_ according to the spec. The label on the
<input> is a part of the display of the element - IMO it makes as much
sense for text-align to apply to this as it would to text in an
embedded SVG image, or similar.

May I ask why do you think that input is a replaced inline element? It
might be that Mozilla treats input like one, but I think there's nothing
in the spec suggesting that <input> element should be a replaced
element.


Here it is:

<http://www.w3.org/TR/CSS2/conform.html#replaced-element>
Replaced element
An element for which the CSS formatter knows only the intrinsic
dimensions. In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements
can be examples of replaced elements. For example, the content of the
IMG element is often replaced by the image that the "src" attribute
designates. CSS does not define how the intrinsic dimensions are found.

Matthias

Jul 20 '05 #4

P: n/a
Mikko Rantalainen <mi**@st.jyu.fi> writes:
Chris Morris wrote:
Mikko Rantalainen <mi**@st.jyu.fi> writes:
The problem is that the label of submit button is always centered on
the button regardsless of 'text-align' property in CSS. Considering
that I can style everything else, this must be a bug, right?
Hmm. The <input> is a replaced inline element, which is presumably


May I ask why do you think that input is a replaced inline element? It


http://www.w3.org/TR/CSS2/conform.html#replaced-element is suggestive.
Though not binding, as far as I can tell.

Actually, replaced or non-replaced it doesn't matter, since text-align
is only supposed to apply to block level elements anyway, applying it
to the _contents_ of any inline element seems unusual.
it would make more sense to have all form elements as replaced or all
elements as styleable.


Perhaps there is an inconsistency in Mozilla, if so I think the most
consistent with the spec is to not allow text-align to affect anything
_inside_ any form control.

--
Chris
Jul 20 '05 #5

P: n/a
Chris Morris / 2003-09-24 14:19:
Mikko Rantalainen <mi**@st.jyu.fi> writes:
Chris Morris wrote:

Hmm. The <input> is a replaced inline element, which is presumably
May I ask why do you think that input is a replaced inline element? It


http://www.w3.org/TR/CSS2/conform.html#replaced-element is suggestive.
Though not binding, as far as I can tell.


Yes, the wording is suggestive even though the section is supposed
to be formal.
Actually, replaced or non-replaced it doesn't matter, since text-align
is only supposed to apply to block level elements anyway, applying it
to the _contents_ of any inline element seems unusual.


If you check the example I gave, you'll notice that I've "display:
block" which makes it [replaced?] block level element. The display
property has the effect I expect from any non-replaced element so I
guess it's working. Also, one can successfully apply pretty much all
CSS properties to <input type="text"> and <textarea> elements so I
guess those aren't replaced elements.
it would make more sense to have all form elements as replaced or all
elements as styleable.


Perhaps there is an inconsistency in Mozilla, if so I think the most
consistent with the spec is to not allow text-align to affect anything
_inside_ any form control.


Yes, that's definately an inconsistency in Mozilla but I'm still
wondering if there's some hack I can use? My point is that Mozilla
applies 'text-align' property to <input type="text"> and <textarea>
(the content of those) so *it can style form elements*. I guess the
rendering engine can align the button label as required if I can
poke it with suitable CSS declarations. Probably some property
starting with "-moz-". MSIE "correctly" styles input buttons without
any problems.

--
Mikko

Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.