Stylesheet Bug applies to most contributed templates

[kuroi]

My thanks to bobski2 AT yahoo DOT com who drew my attention to the following stylesheet bug.

If you use the "tell a friend" facility in Internet Explorer, the text box and extends behind the right column dragging the send button with it, making the facility unusable.

This affects the following templates and probably most sites that have been derived from them:

Template Default
Contemporary Green Classic
Start Aqua Shade and its variants
Arch Shoppe
Bare Bones
Blue Strip Reloaded
Candied Apple and Candied Blueberry
Classic XHTML
Future Zen (pre-version 1.4)
Night Fall
Pretty in Pink
Red Sky
Sage and
Sophy Blue

For clarity, the following templates are NOT affected:

Pre-1.3.5 Classic
Gloss Black and Gloss Blue
Nifty Zen
Mostly Grey
Purples Hades
Simple Zen

Fortunately there is a very simple correction. Find the following near the top of your stylesheet and remove the line in red. Not only does this fix the problem specified, but the Contact Us page looks nicer in Firefox too!

TEXTAREA {

float: left;
margin: auto;
display: block;
width: 95%;

}

[TShooters]

Thanks for the heads up, kuroi. I should have remembered about that
little bug!

[kuroi]

I'm pretty embarassed by this too . I remember proposing a fix to this problem in the forum, but completely failed to spot that it applied to the majority of 1.3+ sites

[Ajeh]

/me peeks at both templates in v1.3.5 ... oh lookie ... it's a float: left; ...

I wasn't sweatin' ... that was the lighting ...

[Rowan]

Thanks for pointing that out Kuroi.

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

I remember removing that from the mostly grey template because the code is so strange, it should really be like this:

textarea {
    width: 100%;
}

This should work fine, note that the tag doesn't need (shouldn't) be uppercase.

[Sketchy]

Kuroi comes to the rescue again, a definite CSS artiste!

[kuroi]

Hi Rowan. Nice job on Bare Bones. I always intended a template consisting of a nothing but a stylesheet to be the follow-up (and logical successor of future Zen) but never got around to it. But it's even better to see somebody else pushing this envelope.

The minimalist approach i.e. "textarea {width: 100%}" works well for some templates, but just a smidgen of horizontal padding and IE is off messing up again by running the fieldset behind the right column (boring and unoriginal) - not so spectacularly, but certainly unaesthetically.

I'm finding the following to be a good solution in those situations

TEXTAREA {

margin: 0.5em auto 0;
display:block;
width: 98%;

}

[kuroi]

Awww Sketchy you're making me blush . Besides if I'd been a bit more awake, when I saw this the first time around, there'd have been a lot less templates out there now with this problem . Credit is due to those like Rowan, mmaxwell and jettrue who spotted that there was something hinky about this styling and avoided the problem in the first place.

[Rowan]

a smidgen of horizontal padding and IE is off messing up

I'll make a note of that, thanks again for the heads-up.

[dbrewster]

Hi, all.

I've tried the solutions suggested above, but when I use graphical buttons with class "forward" they slide under the right column in IE, and TEXTAREA has little to do with it. I like my buttons, I might one day go to some nice CSS buttons, but right now I like them.

I had had a serious problem with customers not being able to check out because the "continue" button was hiding under the right column! Thanks, IE, for not handling float:right correctly.

Here's how I fixed that issue:

1) Add this style to your custom stylesheet:

/* Holly hack for IE. Prevent Continue button from sliding under right column \*/
* html .continueFix { width:60% }
/* */

This * html preface will prevent this style from being applied to non-IE browsers.

2) Make custom versions of tpl_checkout_payment_default.php, tpl_checkout_shipping_default.php, tpl_tell_a_friend.default.

3) Edit those files: Where you see <div class="buttonRow back"> and <div class="buttonRow forward">, wrap those divs and any following echo divs in <div class="continueFix">.

Here's a specific example from tpl_checkout_payment_default.php:

<div class="continueFix">
<div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_CONTINUE_CHECKOUT, BUTTON_CONTINUE_ALT, 'onclick="submitFunction('.zen_user_has_gv_account($_SESSION['customer_id']).','.$order->info['total'].')"'); ?></div>
<div class="buttonRow back"><?php echo TITLE_CONTINUE_CHECKOUT_PROCEDURE . '<br />' . TEXT_CONTINUE_CHECKOUT_PROCEDURE; ?></div></div>

This worked for me, and may work for other folks too.