CSS Button Sizing Errors?

[Alex Clarke]

Has anyone else noticed the 'sizing errors' of certain CSS buttons? Most of the buttons apear fine with the exception of...

1 - The search buttons (contained in the search header)
2 - The Add to cart button (on the product pages)

Both of these buttons appear to be too wide and too high.

Is there a fix for this or am I missing something?

[DrByte]

You should be able to adjust those as necessary to suit your site using the buttons stylesheet.

[paulm]

Hi Alex,

if you remove all width settings form your current css buttons stylesheet, and replace it by this:

input.cssButton, input.cssButtonHover{
  /*  width: 0; needed to stop IE adding "magic" padding to the input */
  width: 0 !important;
  overflow: visible;  
}
input.cssButton[class], input.cssButtonHover[class] { /* IE ignores this [class]*/
  width: auto !important;
}

(the !important attributes are needed in this case to over ride the current inline styling of the buttons)

The button width will be adjusted (depending on the amount of buttontext) by your browser.

And adding height and line-height settings (often, but not always unfortunately) helps to get the same height for both link and input buttons:

.cssButton, .cssButtonHover{
  line-height: 1.5em;
  height: 1.5em;
}

(replacing exisiting height settings, line-height and height need to have the same value, and exsisting padding settings might have to be adjusted as well). You can try other sizes of course, as well as using px sizes (I am not sure if your font-sizes are currently in pixels).

hth

[clydejones]

Hi Alex,

if you remove all width settings form your current css buttons stylesheet, and replace it by this:

input.cssButton, input.cssButtonHover{
  /*  width: 0; needed to stop IE adding "magic" padding to the input */
  width: 0 !important;
  overflow: visible;  
}
input.cssButton[class], input.cssButtonHover[class] { /* IE ignores this [class]*/
  width: auto !important;
}

(the !important attributes are needed in this case to over ride the current inline styling of the buttons)

The button width will be adjusted (depending on the amount of buttontext) by your browser.

And adding height and line-height settings (often, but not always unfortunately) helps to get the same height for both link and input buttons:

.cssButton, .cssButtonHover{
  line-height: 1.5em;
  height: 1.5em;
}

(replacing exisiting height settings, line-height and height need to have the same value, and exsisting padding settings might have to be adjusted as well). You can try other sizes of course, as well as using px sizes (I am not sure if your font-sizes are currently in pixels).

hth

Paulm,

do you mean to delete the declarations such as:
.button_submit {width: 18em;}
There are several of these that define the width of the buttons.

[paulm]

Paulm,

do you mean to delete the declarations such as:
.button_submit {width: 18em;}
There are several of these that define the width of the buttons.

Yep, best to delete *all* width settings, then see how it works. And if needed add button specific styles afterwards again, but ususally there should be no real need to add any specific width settings (after adding the formentioned styles).

[clydejones]

Paulm,

Tried it on my test server and seems to be working just fine. Just need to play with the top/bottom padding.

Many thanks

[Alex Clarke]

Yep, best to delete *all* width settings, then see how it works. And if needed add button specific styles afterwards again, but ususally there should be no real need to add any specific width settings (after adding the formentioned styles).

Thanks for the info. I've tested this out and it works fine. However, the text is not centered in the buttons! It appears to be more to the left. Any easy fix for this?

I've already got text-align set and that's not helping.

[paulm]

Is it possible to post a link?

Is it the same for all buttons, or just some that aren not centered? Maybe there are different left or right padding values added?

[paulm]

I noticed an issue myself today.

In firefox css buttons in table cells become as wide as the table cell itself Which is not always the desired width (I knew the formentioned solution was too easy to be true ;-) ).

I do not think a clean and easy way around this issue exists, but I may be overlooking something.

Two ways to solve this (I can think of now):

1.) Change those (or all) buttons to "display: inline;". But, as far as I can see now, the height of buttons can not be set anymore then (?)

2.) Set the width of those buttons in the stylesheet. Not really a problem of course, but I just hoped to be able to get rid of all button specific width settings :-)

[etoile03]

i've also been trying to use the css buttons. they seem to look pretty good in firefox, but in IE the heights are all varied. has anyone been able to get the css buttons to look good in both firefox and ie?