473,654 Members | 3,089 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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
5 10437
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
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
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#re placed-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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
40716
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div style="display:none"> can be displayed by setting the style attribute to "display:", or hidden with "display:none". This gives the illusion that the person filling out the form is switching from page to page...without the overhead of extra hits on the server,...
3
7716
by: Pete Wilson | last post by:
How can I highlight the <input type="submit"> object that I want to highlight? 1. In my form, the user enters his ID. He sees two submit "buttons," left labeled Cancel, the right labeled Signup. 2. If he enters his ID and selects the Signup button with his mouse, all is well. 3. But if he enters his ID and then hits the Enter key, then the
2
8112
by: Laermans_k | last post by:
Hi, Does anyone have a solution to use the <input type="file" id="filechooser"> and the <input type="submit" id="submitbutton"> in 1 button click? I've already tried to create a javascript function behind the submitbutton click. In this function i call the filechooser.click() event and after this i call the functions to activate the progressbar of the upload. This doesn't seems to work:(
2
3823
by: Tarkeshwar | last post by:
Hi All, I want to restrict the user from being entering the value in <input type="file">. It works fine in IE but not in Mozilla. I am sending my code also which works in IE and not in Mozilla.Can anybody have the solution. Thanks in advance. code :
1
2424
by: mark4asp | last post by:
<form runat="server"automatically adds <divtag to code contained within. Is there a way to stop that? Mixing block-level elements with inline-level elements messes up the HTML becasuse that is invalid for a strict implementation. <spanis in-line-level and <divis block-level. I don't want to mix up <span> and <div> I'm using an <asp:Buttonhere because when it switches to the URL I need to check that the user is in the correct role -...
18
10735
by: zoilus | last post by:
Can not determine how "<?=PHP_SELF?>" is supposed to work. The below is the line of code. <!-- <form name="search" method="post" action="<?=$PHP_SELF?>"--> When the above statement is run the following is the result. You don't have permission to access /dev/forms/forms_testing/< on this server.
1
7077
by: mark | last post by:
Forgive me if this seems like a stupid question but I need help... I'm trying to do a simple online form that emails me the results from a few fields. Here is the code: <form action="http://cm1web1/WebSurveyComponents/script/ processform.asp" method="post">
1
14029
by: ChollaPete | last post by:
This code: <form action="processScan.php" method="get"> <p> <?php print "Scan name: <input type=\"file\" name=\"tScanFileName\" value= \"{$scanFileName}\"><br>"; addHiddenCarryons(); ?> <input type="submit">
14
75490
by: white lightning | last post by:
How to have <select onchange="this.form.submit()"and also a Submit button on one form? I have something like this: <form action="<?php $_SERVER; ?>" method="post" enctype="multipart/form-data" name="form1"> <select onchange="this.form.submit();" name="prod"> <option value="">Select product</option> <option value="12">abc</option>
0
8379
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8294
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8816
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8494
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8596
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6162
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4150
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4297
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
1597
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.