SemperFi Posted June 19, 2006 Share Posted June 19, 2006 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> </td> <td class="loginBtn" width="60" height="21"><input name="submit" type="image" value="Login" class="BtnText"></td> <td width="20" height="21"> </td> <td class="regBtn" width="60" height="21"><a href="cart.php?act=reg&redir={VAL_SELF}"><span class="BtnText">Register</span></a></td> <td> </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 Quote Link to comment Share on other sites More sharing options...
SemperFi Posted June 24, 2006 Author Share Posted June 24, 2006 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. Quote Link to comment Share on other sites More sharing options...
Guest EverythingWeb Posted June 25, 2006 Share Posted June 25, 2006 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. Quote Link to comment Share on other sites More sharing options...
SemperFi Posted June 25, 2006 Author Share Posted June 25, 2006 Any suggestions on how to do that? Quote Link to comment Share on other sites More sharing options...
markscarts Posted June 25, 2006 Share Posted June 25, 2006 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 { Quote Link to comment Share on other sites More sharing options...
SemperFi Posted June 25, 2006 Author Share Posted June 25, 2006 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.