July 24, 2008 09:11pm pdt

1. hielo 439,097
2. Kravimir 406,743
3. Steggs 261,200
4. GreenGho... 94,190
5. VirusMinus 93,060
6. TName 83,385
7. zemond 73,885
8. glumlun 72,715
9. scrathcyboy 68,169
10. bluefezteam 64,657
11. jason1178 64,615
12. mplungjan 58,403
13. Rouchie 53,810
14. mreuring 50,639
15. Eternal_S... 47,243

1. VirusMinus 1,300,340
2. Steggs 1,099,790
3. GrandSch... 1,081,204
4. seanpow... 809,340
5. TName 782,768
6. Roonaan 485,352
7. hielo 456,565
8. Eternal_S... 425,220
9. COBOLdi... 415,775
10. Kravimir 406,743
11. mreuring 269,546
12. oceanbeach 262,232
13. Batalf 232,544
14. GoofyDawg 183,739
15. brunobear 180,148

02.12.2008 at 02:13AM PST, ID: 23155626

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

7.8

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

Zones: Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)

Tags: CSS, Firefox

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

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:

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

           
         

Attachments:

null

Button-FF-IE.gif (9 KB) (File Type Details)

Screen shots from IE7 and FF2

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: aidinet

Solution Provided By: xberry

Participating Experts: 2

Solution Grade: B

Translate:

Loading Advertisement...

20080236-EE-VQP-29 / EE_QW_2_20070628