CSS Back Button - can't change width

[speeke]

I am definitely editing the right file (checked another change which displayed correctly).

Also, I emptied the cache, history etc of the browser, still no change in the width of the button_back style.

I can override other button styles, but not this one. I notice that it is governed by a <span> whereas other buttons are styled in the <input> tag.

Can you confirm that you can change the width of this button (eg bottom left "button_back" of the Advanced Search page)?

Unfortunately, I can't give you a URL, as the site is hosted internally at this stage.

Any other suggestions??

[paulm]

Can you confirm that you can change the width of this button (eg bottom left "button_back" of the Advanced Search page)?

Yep, I even tested it (not because I was not sure if it would work, but to check if classname was correct).

Indeed the links are wrapped in a span, and the inputs are not, but this is not related. Could you post your (css buttons) css file? (including the new width setting)

And maybe temporarily disable all other stylesheets to make sure the problem does not come from another css file?

(the FireFox toolbar by Chris Pederick, is a fantastic tool to track done these kinds of problems, and many others)

[speeke]

Copy of css buttons stylesheet:

/* css buttons */
.cssButton, .cssButtonHover {
width : 20em;
background-color: #F4F4F4;
color : #000000;
border: 2px outset #F4F4F4;
font-size: .8em;
text-align:center;
white-space: nowrap;
text-decoration: none;
/*border-spacing: 1px;*/
/*margin-left: auto;
margin-right: auto;*/
/*display: block;*/
/*vertical-align: top;*/
/*line-height: 130%;*/
/*cursor: pointer;*/
}

.cssButtonHover {
color: #616161;
border-style: inset;
text-decoration: none;
}
/* 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: 4em;}
.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;}*/
.button_back {width: 4em !important;}

[paulm]

Found it :-)

It needs a:

display: block;

(note: a float would work too for example, the inline element just needs to be converted to a block element one way or another)

Inline elements do not have width settings.

[speeke]

Excellent, the display:block; now allows me to change the width.

However, the height of the button is now too big.

I've tried adding margin:0; and padding:0; - but no help.

Any last ideas please :)

[speeke]

Never mind, I added a line-height and margin-top so now it lines up exactly with the search button to the right.

Many thanks for your help.

[paulm]

line-height, exactly what I wanted to suggest

You also may want to check how t works in different browsers BTW.