1 / 3
Feb 2011

Hi there, I redesigned the Add to Cart and View Cart buttons for my website, in order to better facilitate their appearance.



Unfortunately, there's an obscure white border around the Add to Cart button, which isn't there on my PNG's, nor in the code... >_>



http://lite-sites.co.cc/order-lite.php - where the button is located.



The Add to Cart code.



<input type="image" src="/images/addtocart.png" border="0" onClick="javascript:return EJEJC_lc(this.parentNode);">



The View Cart code.



<a href="https://www.e-junkie.com/ecom/fgb.php?c=cart&cl=1&ejc=2&

business=EMAIL ADDRESS" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="/images/viewcart.png" border="0"></a>



The buttons.



http://lite-sites.co.cc/images/addtocart.png

http://lite-sites.co.cc/images/viewcart.png



Can anyone help me nail this weird border?



Thanks!

  • created

    Feb '11
  • last reply

    Feb '11
  • 2

    replies

  • 1.2k

    views

  • 2

    users

  • 5

    links

It appears you're using the FatFreeCart.com service, rather than E-junkie Cart. Please bear in mind that we provide FatFreeCart.com on a strictly do-it-yourself basis with no support whatsoever (that's a major reason it's free :^), so you're expected to figure it out on your own and troubleshoot any issues you may have with that. If you decide to upgrade to an E-junkie cart subscription (aka "FatFreeCart Pro"), that does of course include support. That said, I can try to answer your inquiry this time.



That border appears to be coming from your site's CSS; in http://lite-sites.co.cc/templates/litesites/css/template.css you have this declaration:



input{

border: 1px solid #999;

}



You can just remove that (which would remove the border from ALL form inputs in your site), or you can override it for all form-submission buttons on your site by adding this to your CSS file, below the section given above:



input[type="image"]{

border: none;

}



...or you can override it for just the one button itself by adding a style="border:none;" attribute to that button's input tag like so:



<input src="/images/addtocart.png" style="border:none;" border="0" type="image" onclick="javascript:return EJEJC_lc(this.parentNode);">

Ahhhhhh fixed it! I had no idea my input CSS would affect it! Lol! Oh well, sorted now! Thank you so much!