Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 2 of 2
3 columns layout problem. 
 
Moshe
Magento Team
 
Avatar
Total Posts:  1770
Joined:  2007-08-07
Los Angeles
 

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 
Moshe - 25 May 2008 09: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 : red face

In the above example, it uses :

<input type="button" value="Long buttons in IE are rediculous" class="button">

and Magento uses

<button class="form-button">add to cart</button>

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" ‘:

<button class="form-button" onclick="setLocation('http://zhino.com/checkout/cart/add/uenc/aHR0cDovL3poaW5vLmNvbS9jbXMvaW5kZXgvaW5kZXgv/product/10/')"><span>Add to Cart</span></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 onclick="setLocation('http://zhino.com/checkout/cart/add/uenc/aHR0cDovL3poaW5vLmNvbS9jbXMvaW5kZXgvaW5kZXgv/product/7/')">Add to Cart</button>

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!

 
Magento Community Magento Community
Magento Community
Magento Community
 
shuron
Member
 
Avatar
Total Posts:  58
Joined:  2007-12-09
 

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

in boxes.css --> .form-button

P. S: Thanks Chinesedream and Moshe

 
Magento Community Magento Community
Magento Community
Magento Community
 
jean-micael
Jr. Member
 
Total Posts:  3
Joined:  2008-08-13
 

You are right shuron thanks all;)

John

 
Magento Community Magento Community
Magento Community
Magento Community
 
glanum
Jr. Member
 
Avatar
Total Posts:  18
Joined:  2008-06-09
Avignon, France
 

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

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 2 of 2