?
Solved

Firefox ignore the CSS text-align property when using min-width property on input button

Posted on 2008-02-12
4
Medium Priority
?
3,867 Views
Last Modified: 2012-08-13
Hello Experts

I have a style used with input button aims to give it minimum width:
.FormButton {
      BACKGROUND-COLOR: #E4E4E4;
      FONT-FAMILY: Arial;
      FONT-SIZE: 8pt;
      FONT-WEIGHT: normal;
      WIDTH: 100px;
      OVERFLOW: visible;
}

It works will on IE6+, but it does not work with FF if the text is long it will be truncated.
I fix this by adding the min-width property to the style as this:
.FormButton {
      BACKGROUND-COLOR: #E4E4E4;
      FONT-FAMILY: Arial;
      FONT-SIZE: 8pt;
      FONT-WEIGHT: normal;
      *WIDTH: 100px;
      MIN-WIDTH: 100px;
      OVERFLOW: visible;
      TEXT-ALIGN: center;
}

It fix the issue of long text truncating, but it add a problem of short text alignment.
text-align:center does not fix the problem.

You can see the sample code and the screen shot attached to figure the issue

Is there any CSS solution to the short text alignment problem? I need it to be centered.
Thanks
<html>
	<head>
		<style type="text/css">
			.FormButton {
				BACKGROUND-COLOR: #E4E4E4;
				FONT-FAMILY: Arial;
				FONT-SIZE: 8pt;
				FONT-WEIGHT: normal;
				*WIDTH: 100px;
				MIN-WIDTH: 100px;
				OVERFLOW: visible;
				TEXT-ALIGN:CENTER;
			}
			
			.FormButtonOld {
				BACKGROUND-COLOR: #E4E4E4;
				FONT-FAMILY: Arial;
				FONT-SIZE: 8pt;
				FONT-WEIGHT: normal;
				WIDTH: 100px;
				OVERFLOW: visible;
			}
		</style>
	</head>
	<body>
		<h3> Min-Width Used</h3>
		<input type="button" value="Short" class="FormButton" /><br>
		<input type="button" value="Long Text Button Should Not truncated" class="FormButton" />
		
		<h3> Min-Width Not Used</h3>
		<input type="button" value="Short" class="FormButtonOld" /><br>
		<input type="button" value="Long Text Button Should Not truncated" class="FormButtonOld" />
	</body>
</html>

Open in new window

Button-FF-IE.gif
0
Comment
Question by:aidinet
  • 2
4 Comments
 
LVL 14

Accepted Solution

by:
xberry earned 1500 total points
ID: 20874108
It's because of min-width that browser won't center any longer.

If you could live with leaving away any width at all, then it would center
in all buttons, but buttons certainly will look different in length.

Suggestion:

create two classes of buttons:

a class for long text buttons with no width at all
and a class for Short text with 100 px but no min width anywhere.

Cheers
0
 
LVL 5

Expert Comment

by:smarche
ID: 20877472
Hi,
try with these... maybe could be a solution to turn around the problem..
Try and let me know ;-).
ciao
/*with min-width*/
.FormButton {
	background-color: #E4E4E4;
	font-family: Arial;
	font-size: 8pt;
	width: auto !important;
	width/*IE*/: auto;
	min-width: 66px;
	padding: 0 1.5%;
	text-align: center;
}
 
/*without min-width*/
                        
.FormButtonOld {
	background-color: #E4E4E4;
	font-family: Arial;
	font-size: 8pt;
	width: auto !important;
	width/*IE*/: auto;
	padding: 0 1.5%;
	text-align: center;
}

Open in new window

0
 
LVL 3

Author Comment

by:aidinet
ID: 20892156
xberry:
Thanks for your post
> It's because of min-width that browser won't center any longer.
I discovered this, but could not find a reference that said it is no more possible to center text in "min-width" styled buttons.
Did you have a reference or documentation for this?

smarche:
Thanks for your post
Changing the width to 100px show me that your solution is not perfect, changing the padding to center text is pad practice.
Anyway, thanks a lot.
0
 
LVL 14

Expert Comment

by:xberry
ID: 20896144
>> Did you have a reference or documentation for this?
Well acutally I went over it quick last night and found a reference in German,
which I wouldn't post here, but at least thought I mention.

Anyway, further research brought some more light to it and some possible workarounds (not proofed)
http://www.thescripts.com/forum/thread576464.html

THIS ONE could be the solution:
http://www.456bereastreet.com/lab/form_controls/buttons/

Do you see the buttons for Mozilla/FF and the relevant style (No. 12 !!)
they gave a width of 10em and text-align:right; !! which in Firefox seems to place the buttons
in center.

So, if you apply a browser fork with text-align: right for FF
and text-align: center for any other it should solve your problem, shouldn't it ?
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question