Zen Cart Logo
Forums / Addon Templates / Stylesheet Bug applies to most contributed templates

Stylesheet Bug applies to most contributed templates

Locked

Views: 10,552

Results 1 to 20 of 26
This thread is locked. New replies are disabled.
11 Sep 2006, 3:13 PM
#1
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

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

}

11 Sep 2006, 3:47 PM
#2
tshooters avatar

tshooters

Totally Zenned

Join Date:
Dec 2005
Posts:
1,037
Plugin Contributions:
2

Re: Stylesheet Bug applies to most contributed templates

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

11 Sep 2006, 4:01 PM
#3
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Stylesheet Bug applies to most contributed templates

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:

11 Sep 2006, 11:32 PM
#4
ajeh avatar

ajeh

Oba-san

Join Date:
Sep 2003
Location:
Ohio
Posts:
62,757
Plugin Contributions:
1

Re: Stylesheet Bug applies to most contributed templates

/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:

12 Sep 2006, 12:12 AM
#5
rowan avatar

rowan

Zen Follower

Join Date:
May 2006
Location:
Australia
Posts:
107
Plugin Contributions:
2

Re: Stylesheet Bug applies to most contributed templates

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.

12 Sep 2006, 12:25 AM
#6
sketchy avatar

sketchy

Totally Zenned

Join Date:
Aug 2006
Location:
Canada
Posts:
940
Plugin Contributions:
2

Re: Stylesheet Bug applies to most contributed templates

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

12 Sep 2006, 12:38 AM
#7
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Stylesheet Bug applies to most contributed templates

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

}

12 Sep 2006, 12:55 AM
#8
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Stylesheet Bug applies to most contributed templates

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:

12 Sep 2006, 1:08 AM
#9
rowan avatar

rowan

Zen Follower

Join Date:
May 2006
Location:
Australia
Posts:
107
Plugin Contributions:
2

Re: Stylesheet Bug applies to most contributed templates

a smidgen of horizontal padding and IE is off messing up

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

21 Sep 2006, 5:47 PM
#10
dbrewster avatar

dbrewster

Zen Follower

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

Re: Stylesheet Bug applies to most contributed templates

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.

  1. Make custom versions of tpl_checkout_payment_default.php, tpl_checkout_shipping_default.php, tpl_tell_a_friend.default.

  2. 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.

26 Sep 2006, 4:57 PM
#12
seethrou avatar

seethrou

Totally Zenned

Join Date:
May 2004
Location:
Hong Kong
Posts:
1,156
Plugin Contributions:
0

Re: Stylesheet Bug applies to most contributed templates

Try add the following to your stylesheet.

#tellAFriendDefault textarea {
   float: none;
}
26 Sep 2006, 5:03 PM
#13
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: Stylesheet Bug applies to most contributed templates

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.

26 Sep 2006, 5:09 PM
#14
lbell908 avatar

lbell908

New Zenner

Join Date:
Sep 2006
Posts:
2
Plugin Contributions:
0

Re: Stylesheet Bug applies to most contributed templates

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

28 Oct 2006, 9:10 AM
#15
sketchy avatar

sketchy

Totally Zenned

Join Date:
Aug 2006
Location:
Canada
Posts:
940
Plugin Contributions:
2

Re: Stylesheet Bug applies to most contributed templates

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

TEXTAREA {
	float: left;
	margin: auto;
	display: block;
	width: 95%;
	}
28 Oct 2006, 9:32 AM
#16
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Stylesheet Bug applies to most contributed templates

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.

28 Oct 2006, 1:02 PM
#17
paulm avatar

paulm

Totally Zenned

Join Date:
Nov 2003
Posts:
1,878
Plugin Contributions:
5

Re: Stylesheet Bug applies to most contributed templates

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.
28 Oct 2006, 4:29 PM
#18
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Stylesheet Bug applies to most contributed templates

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?

28 Oct 2006, 7:46 PM
#19
paulm avatar

paulm

Totally Zenned

Join Date:
Nov 2003
Posts:
1,878
Plugin Contributions:
5

Re: Stylesheet Bug applies to most contributed templates

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)

7 Nov 2006, 6:10 PM
#20
handkem avatar

handkem

Zen Follower

Join Date:
Oct 2006
Posts:
152
Plugin Contributions:
0

Re: Stylesheet Bug applies to most contributed templates

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