Magento

We had the same problem and this solution helped us:
http://jehiah.cz/archive/button-width-in-ie-revised

Moshe - 25 May 2008 10:46 AM

We had the same problem and this solution helped us:
http://jehiah.cz/archive/button-width-in-ie-revised

Ah I see, I never encountered this bug :

In the above example, it uses :

and Magento uses

While the button attribute in the html form element maybe the same as html button tag, IE may not treated it the same.

IE doesn’t like ‘width: auto’ that is for sure and with the above possibility that it’s treating button attribute in the html form element and html button tag, thus the ‘width: 1pt’ or ‘width:1’ doesn’t do the trick.

Giving a width value that is larger than 1px or pt and that is wider enough to hold the ‘add to cart’ works.
This is what I come out:
http://lotusseedsdesign.com/1.html

[1] The default orange background style is with Magento code with ‘button class="form-button" ‘:

and with the following CSS

.form-button {
overflow:visible;
width:80px;
padding:0;
background:#f18200;
color:#fff;
border:1px solid #de5400;
text-align:center;
vertical-align:middle;

[2] the one with white background is button without class declared.

button{padding: 0px;border:1px solid #333;margin:0;background: #fefefe;width:80px;color:#000}

In IE7, the [2] has the the text centered yet [1] not, as yo can clearly see, the right side is few pixel padding short.

In IE6, [1] and [2] are the same, therefor I suggest you remove the ‘form-button’ class or re-work the declaration in the ‘form-button’ class.

Hope this helps!

I could solve the problem
by changing “with:auto;” to “width:80px;”

in boxes.css --> .form-button

P. S: Thanks Chinesedream and Moshe

You are right shuron thanks all;)

John

It is quite improper to specify width on the button, since text varies in length.

The only solution I have come across so far is given here:
http://www.magentocommerce.com/boards/viewthread.../viewthread/6745/

They provide a solution that makes buttons not padded under IE7. Simple CSS.
We all know how IE handles padding and width…

Hope everyone’s problems are solved on that one!

David - Tzav Multimedia and Advertising Agency