2 style sheet problems

[rstevenson]

Hi folk,

[ link below, in my sig ]

I'm using the Sage template, modified by me, but not wildly so. As well, I've got CSS buttons turned on and am now modifying that stylesheet to suit. Two problems have appeared...

1. In all browsers, my product lists have subtle green alternating background colours. But the list in the shopping cart is light and dark gray. Why don't they follow my rowOdd and rowEven styles?

2. In IE 6/Win (maybe 5 and 7 too?) most of my buttons look the same as in other browsers but the Continue Shopping and the Checkout button in the shopping cart seem to have shrunk vertically. They have a left and right border but nothing top or bottom. I can't seem to find what might be restricting their height like that.

Alert minds might see that both these problems appear in the shopping cart and conclude that the cart has a hard time following the stylesheet. If so, could someone please tell me how to make sure my styles are respected in the cart.

TIA,

Rob

[Kim]

.rowOdd {

	background-color: #E8E8E8;

	height: 1.5em;

	vertical-align: top;

}



.rowEven {

	background-color: #F0F0F0;

	height: 1.5em;

	vertical-align: top;

[rstevenson]

Well jeez, if you're going to point out how stupid I am.... :-P

Okay, for those who'd like to know what I did wrong, I have these further down in my style sheet...
.productListing-even { background-color: #F5F5D6; }
.productListing-odd { background-color: #E6F0D2; }

...and I expected them to just magically apply to all listings. That's what happens when you make changes to an already complex stylesheet over a period of weeks. You forget what you've done.

So now I will put my colours into the rowOdd and rowEven declarations and that will fix one of the problems.

Thanks Kim. Any ideas on the other problem?

Rob

[barco57]

I can't test it but try pulling .buttonRow out of the statement its in and putting by itself and giving it the old height hack (height: 1%;) see if that works.....I don't know if it will but you never know.

[rstevenson]

An interesting possibility barco, but alas, it didn't make any difference.

Such are the joys of debugging IE.

Rob

[rstevenson]

While trying to debug this I saw in Source View that the widths of those two buttons are hard coded. Can someone tell me why this is done? Is it necessary? And, if not, where might an interested person go to change this?

Since I want visitors to be able to adjust their font size as they need, I don't want any hard-coded widths in things like buttons.

T'anks,

Rob

[barco57]

tpl_shopping_cart_default.php at approx line 131 is where the button is called

[rstevenson]

Yeah, but this is where I get hung up so many times in trying to find stuff.

That part of that file is where the Continue Shopping and Checkout buttons get called (it starts with <!--bof shopping cart buttons-->) but that's not where the style hard-coding is. And I don't know how to backtrack to where it actually is from that point.

So where it says...

zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT)

... I should be able to use the Developer's Tool Kit in admin to find that, but the several times I've tried it before I get no useful results.

For example looking for BUTTON_IMAGE_CHECKOUT gets me the file you mentioned and the button_names.php file, neither of which contain the problematic style="width: 80px;" bit. (Remember, I have CSS Buttons turned on.)

Maybe if I do a multi-file search for style="width: 80px;" using BBEdit on my hard drive.... Nope, that didn't work either.

Ah well, another one for the Zen_mystery.php file.

My book should be here soon.

Rob

[barco57]

I think the way the css buttons works is that the alt text for the button is used and some function does the math based on the number of characters in the alt text to determine the width. So its not actually hardcoded........I think.....sounds good though.....And I think that html_output.php has something to do with it somewhere along the way.....I do believe there is a min width setting somewhere for the css button in that file....maybe......could be.....

[rstevenson]

Good call!

In html_output.php one will find these lines...

// automatic width setting depending on the number of characters
$min_width = 80; // this is the minimum button width, change the value as you like
$character_width = 6.5; // change this value depending on font size!

The first line (after the comment) is fine, except that I don't quite get why it needs to have a minimum width at all if it's calculating the width.

The second line is a problem. It's setting the width of a character to a pre-determined number -- which I assume is pixels. But if the user is browsing with a larger or smaller font size? On a screen where the logical pixel differs from the physical pixel size?

[mumble, mumble...]

There are too many of these pixel-surprises in Zen. Flexibility should be the goal. Make no assumptions! Let the site flow!!

Speaking of flowing, I think I need a pint of bitter. Care to join me?

Rob