Stylesheet Bug applies to most contributed templates

My thanks to [email protected] 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%;

}

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

I'm pretty embarassed by this too :blush:. 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 :lamo:

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

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

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.

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

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%;

}

Awww Sketchy you're making me blush :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 :yes:. 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.:wink2:

a smidgen of horizontal padding and IE is off messing up

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

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.

I have changed the stylesheet.css using all of these examples and it still won't fix the tellafriends page. Is there any thing else I should try. http://www.spiritualhearts.com/zencart/index.php?main_page=tell_a_friend&products_id=1

Try add the following to your stylesheet.

#tellAFriendDefault textarea {
   float: none;
}

textareas and floats are okay together, but floats and % widths with textareas are not.

http://www.zen-cart.com/forum/showthread.php?t=43058&highlight=textarea+float

So ... don't mix a width: xx%; with a float: xxxx; for textarea selectors.

:smile: Thank you so much that worked :smile: :smile:

So, do I remove this in 1.3.6 also ?? :wacko:

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

Sketchy:

So, do I remove this in 1.3.6 also ?? :wacko:Aaiiyyy. There'll be a red face over that one. Well spotted Sketchy.

Something different, but in the same range maybe so that is why I post it here.

Not a 1.3.5 or 1.3.6 bug I think, but an issue I notice with fresh 1.3.5 and 1.3.6 installs and Firefox.

De advanced search looks a bit messed up and is (almost) unusable in Firefox (I think IE is ok, so it might be a Firefox bug?) It's a bit difficult to describe for me, so I attached a screenshot to this post.

I noticed converting the form back to a block level element helps:

.centerColumn FORM {
display: block;  
}
```but I am not sure about the real cause of the problem.

Paulm, I can't reproduce this in 1.3.5 or 1.3.6 using FF2 or FF1.5.0.6. Do you have a live site with this behaviour?

Hi Kuroi,

I already wondered why I hadn't heard others complaining about it. I just checked 2 other PCs here and the advanced search looked just fine. Then I checked my FF version on this PC and it was 1.07 :shocking: :blush:

Upgraded to FF 2.0 and the problem is gone ...... :-) (so it may be a FF1.07 bug)

I'm seeing this same issue with IE6. I changed the Stylesheet settings, but still have the same problem. Any ideas???