Are button widths being set by code?

[rstevenson]

Hi folk,

I've been trying hard to get IE to draw the buttons correctly, using the stylesheet_css_buttons.css that comes with Zen.

I can modify font colours and background colours and rollover colours, but nothing I do to the width has any effect. 'Good' browsers draw the buttons big enough for the text in them; IE does not. And even in IE some buttons are okay and some are not. And different versions of IE render the buttons differently!

I've tried using padding within the buttons: no effect. I've tried setting the width: no effect. I've tried not setting the width: no effect.

I'm about to go draw some buttons and give up on the CSS buttons, but that shouldn't be necessary. Can anyone help?

TIA

Rob

[paulm]

The Zen CSS buttons are based on an old beta version of the CSS buttons contribution. In that version the needed width was estimated by counting text characters and set using inline styles.

Inline styles can be overridden by adding "!important" to the css property in the stylesheet.

Random example:

.myClass{
width: 10em !important;
}

But I would rather upgrade to the latest css buttons version if I were you, or indeed use image buttons.

[rstevenson]

I didn't realize there were versions! I thought what came with Zen Cart was the latest. I'll give this a shot, hoping that it fixes the problems with IE. (Though only Microstuff can fix the REAL problems with IE. ;-0)

Thanks Paul.

Rob

[rstevenson]

Hi Paul,

Followed all the steps. I can log in to admin, but when I try to access the site (on my local test server) all I get is a blank white page.

I'm running Zen 1.3.7 on PHP 5.1.6 and MySQL 5.0.19, all within MAMP on Mac OS X 10.4.9. If you want any more numbers, I can probably find them! ;-)

Rob

[paulm]

I would put back the original html_output.php file (the only file that's editted by the CSS butons contribution) and see if the site works again.

If it it helps I think you made an error editting it.

If it doesn't help, I ehhhh... dunno.

To be honest I haven't tried the contribution on 1.3.7 yet. I will try it out today and let you know how it goes.

[paulm]

Just installed, only forgot to read the instructions ( ) and to replace the css file, and was suprised that the buttons looked different than I expected.

Note: I checked the html_output files and both the html_output.php's (admin and catalog) of 1.3.6 and 1.3.7 are the same. So you could even use the included file for 1.3.6 (in the extra's folder, rename html_output-136.php to html_output.php and copy over the original) if you have not made any changes to it already. Although it's only two small edits of course....

I also noticed that the height of the buttons was not the same for all buttons, maybe better to use pixels for height and and line-height add a little vertical padding. The default em values make the height depend on the "local font size" of course, which might not be such a good idea.

[paulm]

Also noticed that the included *admin* stylesheet example produces some very wide buttons in Firefox (and maybe IE too?) and does not include the css to hide css popups when not hovered (I doubt if anyone uses this feature anyway, but still...).

Probably better to simply use the same stylesheet_css_buttons.css example file for admin as is already included for the catalog side.

[paulm]

Actually this inspired me to create a new version :-)

The differences are very small though, and upgrading will be very easy. No file edits needed (except the stylesheet maybe, if you've already modified the css but want some of the css of the new version anyway).

It will be uploaded within a couple of days.... probably.
(to the CSS buttons support thread and/or upload section)

[rstevenson]

Hi Paul,

Sorry I left you talking to yourself all day. ;-) I was on the road for a few hours.

I replaced html_output.php and everything is back to normal. I must have blown the edit. But I did search for each bit you said to look for, and copied over what was required, so I don't know what went wrong. Just a thought: the code to copy is in a text file. Maybe copying it in brought in the wrong kind of line endings. I'll be careful about that when I redo it.

I'll look for the new version (though I expected to heavily redo the css for the buttons anyway).

Rob

[rstevenson]

Hi again,

Just did it over, this time being very careful about line endings. I even zapped gremlins (removed non-ASCII characters, null characters and such like) and this time it's fine. I don't know what I did wrong before, but obviously something was amiss.

And now to deal with those red and yellow buttons!

Rob