Button Issues....grrr

[SemperFi]

Having a few issues with buttons throughout the site.

What I want :

- all to look the same throughout the site

- all to look the same using firefox/IE

- all to look like the viewcart button in sidebox (background colour changes on mouseover, cc standard I think)

Shouldnt be too difficult.....yet it is...and is therefore driving me

Here is where all are currently at....quite a mess actually.

Mailing list sidebox

Template :

	<div style="padding-top: 5px; text-align: center;">

		<input name="submit" type="submit" value="{LANG_GO}" class="submit" />

	</div>

CSS :

.submit {	

	font-family: Arial, Helvetica, sans-serif;

	color: #FFFFFF;

	background-color: #800000;

	border: none;

	height: 18px;

	font-weight: bold;

	border: 1px solid #800000;

}

Search Button



Template :

<input name="Submit" type="submit" class="searchBtn" value="Search" />

CSS :

.searchBtn {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 60%;

	font-weight: bold; 

	color: #FFFFFF;

	border: none;

	height: 20px;

	width: 60px;

/*	background-image: url(../styleImages/buttons/search_button_background.gif); */

	background-color: #80000; 

}

Session



Template :

  <tr>

	<td>&nbsp;</td>

	<td class="loginBtn" width="60" height="21"><input name="submit" type="image" value="Login" class="BtnText"></td>

	<td width="20" height="21">&nbsp;</td>

	<td class="regBtn" width="60" height="21"><a href="cart.php?act=reg&amp;redir={VAL_SELF}"><span class="BtnText">Register</span></a></td>

	<td>&nbsp;</td>

  </tr>

CSS :

/* Start Login/Register Button Additions */

.loginBtn {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 50%; 

	font-weight: bold; 

	color: #FFFFFF;

	text-align: center;

	border: none;

/*	height: 17px; */

/*	width: 40px; */

	background-image: url(../styleImages/buttons/searchSubmit.gif); 

	text-decoration: underline;

	cursor: pointer;

	cursor: hand;

	margin-bottom: 5px; 

}

.BtnText {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 10px; 

	font-weight: bold; 

	color: #FFFFFF;

	text-align: center;

	text-decoration: underline;

	cursor: pointer;

	cursor: hand;

}

.regBtn {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 10px; 

	font-weight: bold; 

	color: #FFFFFF;

	text-align: center;

	border: none;

/*	height: 17px; */

/*	width: 60px; */

	background-image: url(../styleImages/buttons/searchSubmit.gif); 

	margin-bottom: 5px; 

}

And last but not least....the one that works as expected.



Cart sidebox



Template :

	<div style="text-align: center; padding-top: 3px;"><a href="cart.php?act={CART_STEP}" class="txtviewCart">{LANG_VIEW_CART}</a></div>

CSS :

a.txtviewCart:active, a.txtviewCart:link, a.txtviewCart:visited {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 70%;

	font-weight: bold;

	color: #FFFFFF;

	background-color: #800000;

	text-decoration: none;

	font-weight: bold;

	padding: 2px;

/*	border: 1px solid #000000; */

}

a.txtviewCart:hover {

	background-color: #FF3300;

	color: #FFFFFF;

}

As you can see...there is no conformity between any of them

What do I need to do to get all of them to behave and appear like the cart button?

Thankyou greatly in advance

[SemperFi]

Any chance of getting some help on this one?

This is one of the last remaining things I need to do before my site goes live.

[Guest EverythingWeb]

Well the first thing that springs to mind is that all but the one you mention as working "correctly" are actually submit buttons, whereas the cart link is just a regular href textual link.

The only thing you could try is making the ones which are buttons, into links, but it will take some hacking or make the cart a submit button, but again could take some hacking - but something to think about.

[SemperFi]

Any suggestions on how to do that?

[markscarts]

ha ha ha

Not so easy making submit buttons look like the text link buttons, is it.

For FF, use the css cursor property to display the pointer on submit buttons.

Another tip; do away with all the individual settings - set them all in one place, e.g.:

.submit, .searchBtn, a.txtButton, a.txtUpdate, a.txtCheckout {

and

.submit:hover, .searchBtn:hover, a.txtButton:hover, a.txtUpdate:hover, a.txtCheckout:hover {

[SemperFi]

Good suggestion there Markscarts, thankyou

As for the css cursor property...

cursor: hand

Correct?

As for whether they be text or images, I really dont mind.

Just want them to look the same, and I just happened tolike the look of that one.

If you can give some pointers on how to do the same with an image, Id be just as happy to do that.