CSS Back Button - can't change width

[speeke]

Hi all,

Just wondering how to change the width of the .back_button css.

This button appears bottom left of Advanced Search page, for example.

I've tried adding the following to the stylesheet_css_buttons.css:

.button_back { width: 7em; }

but no change!

Any help gratefully received.

[paulm]

The current version of the css buttons uses inline styling to set the width, that is why you need to add "!important" to over ride these styles like this:

.button_back {
width: 30em !important;
}

[speeke]

Hi paulm

Thanks for the reply.

I've tried adding this to stylesheet_css_buttons.css,
but no change.

Any ideas why please?

[paulm]

Maybe you editted the wrong file then, or it might be a cache issue. (press ctrl+reload (IE) or shift+reload (FF) to refresh the page).

Is it possible to post an url?

[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.