Forums / Templates, Stylesheets, Page Layout / Continue button slides under the right column in IE

Continue button slides under the right column in IE

Locked

Views: 1,490

Results 1 to 2 of 2
This thread is locked. New replies are disabled.
2 Jun 2006, 1:53 PM
#1
dbrewster avatar

dbrewster

Zen Follower

Join Date:
Jul 2005
Location:
Charlottesville, VA
Posts:
376
Plugin Contributions:
0

Continue button slides under the right column in IE

Howdies.

I'm prob not the first one to report this problem but I can't find a relevant thread.

I heard that some of my customers were having trouble checking out, and finally I have enough information to diagnose the problem.

I'm not sure if this is classified as a stylesheet or template issue but...
**
In IE only** (thanks, Microsoft, for your poor adherence to W3 spec) the Continue button in Step 1 of checkout (main_page=checkout_shipping) slides UNDER the right column windows on narrow displays. That page, and main_page=checkout_payment, have no tables.

The previous screen, main_page=shopping_cart, is fine. That page has a table. We all know that IE 6 likes tables and does not play nice with divs.

I've been trying to figure out how I might fix this problem (stylesheet change? template change?)

Should I put a 1 cell table around the Continue button on the templates?

Suggestions, please, or redirection to a thread that deals with this issue.

Muchas Gracias,

---Diana

2 Jun 2006, 3:15 PM
#2
dbrewster avatar

dbrewster

Zen Follower

Join Date:
Jul 2005
Location:
Charlottesville, VA
Posts:
376
Plugin Contributions:
0

Re: Continue button slides under the right column in IE

So far I've tried:

  1. various stylesheet settings for .buttonRow forward without success, including display settings (block, inline-table) and fixed width/height.
  2. wrapped a 1-cell table instead of a div around the button, also no luck, thing still slides underneath the right sidebars.

I really really really don't want to go to fixed width. I hate it.

But, maybe I have to do that for these two screens only. Hmm next thing to try.

... some time later...

This works but not really elegant:

/* Holly hack for IE. Prevent Continue button from sliding under right column \*/
* html #checkoutShipping.centerColumn,
* html #checkoutPayment.centerColumn { width:450px }
/* */

Maybe I can make just the bottom button section fixed width, wonder how that would work.

---Diana