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

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
LVL 3
aidinetAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

xberryCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smarcheCommented:
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
aidinetAuthor Commented:
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
xberryCommented:
>> 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.