CODEWITHSUNDEEP
cssgwt
NARU
NARU

Reputation: 2829

Size of button in IE8 is larger than the size in Google Chrome and Firefox

I am using GWT 2.3 to create a web application. In the web page, I have a button for the submission. I haven't created any css properties for this button. In Google Chrome and Firefox, the size of the button is just the size of the text of the button. However, in IE8, the size is bigger, with some spaces before and after the text of the button. Does any body know how should I do? Since I need to support the internationalization, the texts of the button for different locales are different.

I have tried width:auto; for the button, but it doesn't work.

Thanks in advance!!

Upvotes: 2

Views: 1755

Answers (3)

Peter Knego
Peter Knego

Reputation: 80330

Use Anchor with different background images for it's various states (link, active, hover, visited).

Upvotes: 1

Chris Lercher
Chris Lercher

Reputation: 37778

In general (not only for GWT), buttons are rendered very differently not only between browsers, but also between operating systems - especially they look completely different on Mac OSX. Take a look at this site, which also has a few nice solutions around the button problem: http://particletree.com/features/rediscovering-the-button-element/

So if you need exact sizes (and maybe a consistent look) across browsers/OS, I think it's better not to use the native button style at all, but to fully customize the style of your buttons. (This is pretty usual on modern web sites, e.g. I don't think there are any native style buttons on stackoverflow.com at all.)

Upvotes: 1

OverZealous
OverZealous

Reputation: 39560

Ah, this is an oldie but goodie.

Basically, IE sucks at rendering buttons and you have to add this CSS to fix it:

.my_button {
   /* optional */
   padding:0 .25em 0 .25em;
   /* These two are required */
   width:auto;
   overflow:visible;
}

See the link above for more information.

Upvotes: 4

Related Questions