Checkout problems

[stbede77]

I was checking the rez differences on my site and found that if my customers have a resolution 1024x768 they have a problem seeing step 1 of checkout... My site is www.irozeny.com.. How can this be fixed?

[stbede77]

24 hours later I am still having the same problem... anyone know where I might be able to start?

[seethrou]

First, it only happen to IE but Firefox looking fine.

There are 2 problems.
1. centerColumn
2. textarea

1. centerColumn
with
padding: 0.8em; in the group of line 322
then
padding: 0.1em; in the group of line 1627

It seems that the 0.1em for padding-left and padding-right are not sufficient.
Suggest increase them to about 1em or any will fit.

The follow is only suggestion, please adjust to fit your case.

.centerColumn {
	padding: 0.1em 1em 0.1em 1em;
}

2. textarea, this also affect tell a friend

Again, you have 3 repeated define for textarea.
Suggest remove those not needed.

And modify the last one at about line 1379.
Remove the float: left;

TEXTAREA {
	float: left;
	margin: auto;
	display: block;
	width: 95%;
	}

And become

TEXTAREA {
	margin: 0.5em auto 0;
	display: block;
	width: 95%;
	}

Reference
[Done 1.3.5] Tell a Friend display Error

Hope this helps.

.

[stbede77]

Umm... what file are you looking at? If your looking at my stylesheet.css in \includes\templates\irozeny\css I think you might be mistaken... I dont evey have over 800 lines in the file...

[seethrou]

Umm... what file are you looking at? If your looking at my stylesheet.css in \includes\templates\irozeny\css I think you might be mistaken... I dont evey have over 800 lines in the file...

Oops!
Sorry, may be the cache or buffer of my programs had problems and I had cleared all of them.
I looked again, and the sytelsheet only with 736 lines.

At my side, your problem still occurs in IE.
Please take a look to the page of:
Step 1 of 3 - Delivery Information

and the legend of:
Special Instructions or Comments About Your Order

In IE, your page without sufficient width for the sentence to layout and caused it stretch out to the right side. Then the other elements also follow it and caused overlap to the right side.

May be
1. try to reduce the font size of the legend for it take less width. But it also affect other legends in the same page.

.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	padding: 0.1em 0.5em 0.1em 0.5em;
	}

#checkoutShipping LEGEND {
	font-size: 0.9em;
	font-weight: bold;
	padding: 0.1em;
        }

Or,
2. reduce the widths of left and right column, and provide more width to center column.

Or,
3. shorten the sentence a bit from
Special Instructions or Comments About Your Order

change it to (only suggestions!)
e.g.
Special Instructions or Comments of Your Order
or,
Your Special Instructions or Comments

Hope this helps.

.