help with my css buttons

I modified the stylesheet_css_buttons.css file.

My website is https://www.palestream.com. The button on the right is the way I want it to look. Notice my search button, on the left, seems bunged up somehow. It has kind of an outline around it, and the two little boxes on the side aren't even with the center space. In Firefox it has become left-aligned instead of centered, although in IE it is still centered.

Any help appreciated. The code follows.
Thanks!

/* css buttons */
.cssButton, .cssButtonHover {
width : 20em;
display: block;
padding: 0.25em 0.5em 0.25em 0.5em;
background: #ffffcc;
text-decoration: none;
text-align:center;
border-left: 1em solid #54075b;
border-right: 1em solid #54075b;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
/border-spacing: 1px;/
/margin-left: auto;
margin-right: auto;/
/display: block;/
/vertical-align: top;/
/line-height: 130%;/
/cursor: pointer;/
}

.cssButtonHover {
border-left: 1em solid #060;
border-right: 1em solid #060;
color: #004500;
background: white;
}
/* adding the styles below might be needed if the default button width is changed /
/ .button_continue_shopping, .button_shipping_estimator {width: 150px;} /
.small_delete, .button_prev, .button_next, .button_search {width: 7em;}
.button_sold_out_sm, .button_sold_out, .button_update_cart, .button_checkout, .button_login {width: 10em;}
.button_return_to_product_list, .button_add_selected {width: 22em;}
.button_in_cart{width: 19em;}
.button_submit {width: 18em;}
.button_update_cart {color: red;}
.button_update_cartHover {color: black;}
/.innerbox#headernavcenter .boxtext .button_search {display:inline;}*/

Playing with this in firefox w/web developer I uncommented both the margin_left and the margin-right and the button moved over to the center.

The border problem around button is caused by the button picking up outset styling from somwhere. Probably an inline setting somewhere since I can't find it in the stylesheets anywhere.

I can get the outset border to go away and the borders you have set for the other button to appear to be where they belong. I added a 1px top and bottom to define the button as the background color matches its surrounding. I know i'm gonna get yelled at for this but it works. the first declaration kills the outset border and the rest adds the correct border back in. I put the at the bottom of stylesheet_css_buttons.css

.button_search {border: none; border-left: 1em solid #54075b; border-right: 1em solid #54075b; border-top: 1px solid #54075b; border-bottom: 1px solid #54075b; }

Thanks very much for the tips Mike. I would never yell at you for helping me out! I will try this out.

I figure I'll get yelled by some of the css masters around here for doing it this way. When what I really should do is dig and find where the outset styling is being set and remove it there instead of just overriding it with the css.:wink2:

Funny (?), only adding border none before the existing border setting helps too (only tested in FF):

/* css buttons */
.cssButton, .cssButtonHover {
width : 20em;
display: block;
padding: 0.25em 0.5em 0.25em 0.5em;
background: #ffffcc;
text-decoration: none;
text-align:center;
border: none;
border-left: 1em solid #54075b;
border-right: 1em solid #54075b;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
/border-spacing: 1px;/
/margin-left: auto;
margin-right: auto;/
/display: block;/
/vertical-align: top;/
/line-height: 130%;/
/cursor: pointer;/
}
This way it will solve the problem for all input buttons (the problem probably is not just the search button, but all input buttons).

:lamo: ahhhh, yup. that works to. I was spending to much time just worrying about the .button_search class. I didn't think about the problem manifesting itself other places.

That is so great about forums like these.

You found a solution, and I found a simplification/improvement. That way we help each other :-)

ok then I'll be sending you all my code for simplification.:P Yeah, more time for :cheers: :cheers:

barco57:

ok then I'll be sending you all my code for simplification.That is ok. If you write all code too solve my problems, I will try to improve it a bit :smartass:

And thanks a lot for the: :cheers:

I don't know if it helps or not, but when I had weird issues with the css buttons, I found out that fooling around with line-height solved my problems. I had to play a bit, but finally I managed to get it 98% working.
Just my 2cents
Cheers,
f.

Thanks to you both it is now working. I guess that's a good way to fix weird css glitches, set everything to none first, and then do the styles.

A virtual Canadian beer to both of you, although that Dutch Heineken stuff is pretty darn good!

fricy:

I don't know if it helps or not, but when I had weird issues with the css buttons, I found out that fooling around with line-height solved my problems.Good one fricy, that indeed is something that often helps to solve cross browser issues.

Canadian beer to both of youThanks :-)

I will add both the border: none; and the line-height to my next version of the CSS buttons (working on version 2.0 atm). And hopefully the Zen core will be updated accordingly some day.