Here's the updated zenCssButton function:
Code:
/**
* generate CSS buttons in the current language
* concept from contributions by Seb Rouleau and paulm, subsequently adapted to Zen Cart
* note: any hard-coded buttons will not be able to use this function
**/
function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') {
global $css_button_text, $css_button_opts, $template, $current_page_base, $language;
$button_name = basename($image, '.gif');
// 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!
// end settings
// added html_entity_decode function to prevent html special chars to be counted as multiple characters (like &)
// $width = strlen(html_entity_decode($text)) * $character_width;
// $width = (int)$width;
// if ($width < $min_width) $width = $min_width;
// $style = ' style="width: ' . $width . 'px;"';
// if no secondary class is set use the image name for the sec_class
if (empty($sec_class)) $sec_class = $button_name;
if(!empty($sec_class)) $sec_class = ' ' . $sec_class;
if(!empty($parameters))$parameters = ' ' . $parameters;
$mouse_out_class = 'cssButton ' . $sec_class . (($type == 'submit') ? ' submit_button button' : '');
$mouse_over_class = 'cssButtonHover ' . $sec_class . $sec_class . 'Hover';
// javascript to set different classes on mouseover and mouseout: enables hover effect on the buttons
// (pure css hovers on non link elements do work work in every browser)
$css_button_js .= 'onmouseover="this.className=\''. $mouse_over_class . '\'" onmouseout="this.className=\'' . $mouse_out_class . '\'"';
if (CSS_BUTTON_POPUPS_IS_ARRAY == 'true') {
$popuptext = (!empty($css_button_text[$button_name])) ? $css_button_text[$button_name] : ($button_name . CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT);
$tooltip = ' title="' . $popuptext . '"';
} else {
$tooltip = '';
}
if ($type == 'submit'){
// form input button
$css_button = '<input class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' .$text . '"' . $tooltip . $parameters . ' />';
}
if ($type=='button'){
// link button
$css_button .= '<span class="normal_button button"><span class="' . $mouse_out_class . '" ' . $css_button_js . $tooltip . ' > ' . $text . ' </span></span>';
}
return $css_button;
}
and the updated stylesheet_css_buttons.css
Code:
/* This imageless css button is based on the button that was generated by CSSButtonGenerator.com */
.buttonRow a {
text-decoration: none;
}
.button, input.button, input.cssButtonHover {
-moz-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
-webkit-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
box-shadow:inset 0px 1px 0px 0px #dbd8c0;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
display:inline-block;
font-family:Verdana;
font-size:13px;
font-weight:bold;
margin: 0;
padding:3px 8px;
text-decoration:none;
}
input.submit_button {
background-color:#fee8b9; /* Submit button background color */
border: 1px solid #638263; /* Submit button border color */
font-size: 13px;
font-weight: bold;
display: inline-block;
margin: 0;
padding: 3px 8px;
color: #404040; /* Text color for submit buttons */
}
input.submit_button:hover, input.cssButtonHover {
background-color:#ffdc9c; /* Hover color for the submit buttons */
border: 1px solid #638263; /* Submit button border color */
cursor: pointer;
}
span.normal_button {
background-color:#ced79c; /* Link button background color */
border:1px solid #638263; /* Link button border color */
color:#404040; /* Text color for link-related buttons */
}
span.normal_button:hover {
background-color:#b4bc8b; /* Hover color for link-related buttons */
}
span.normal_button:active, span.submit_button:active, span.submit_button:active input {
position:relative;
top:1px;
}
These changes correct the IE submit button hover problem.
Bookmarks