1 reply [Last post]
lisa4va
Offline
newbie
Last seen: 12 years 32 weeks ago
Timezone: GMT-6
Joined: 2010-04-20
Posts: 1
Points: 2

Hello all,

I am working on replacing buttons with custom images in our shopping cart and have gotten buttons to appear perfectly in FF but can not get them to display in ie at all. I have searched for a work around and tried suggestions from our third party software provider/host, adding a #MainImage background url, removing height and even font color??? but have had no luck. Roughly 90% of our shoppers use ie and my sanity is at stake at this point Puzzled . I am new to css and am unsure of what to edit from here. My button code is as follows:

#mainImg
{
    margin: 0 10px 10px 0;
    float: left;
}
 
/* Cart Styles */
 
.AddToCartButton 
{
    font-size: 1em;
    font-family: Arial;
    font-weight: bold;
    text-align: right;
    background-image: url('http://www.championsondisplay.com/skins/Skin_9/images/addtocart2.png');
    width: 100px; 
    height: 25px;
    padding-left: 29px;
    margin: 0px;
}
.AddToWishButton
{
    font-size: 1em;
    font-family: Arial;
    font-weight: bold;
    text-align: right;
    background-image: url('http://www.championsondisplay.com/skins/Skin_9/images/addtowish.png');
    width: 120px; 
    height: 22px;
    padding-left: 33px;
    margin: 0px;
}
#Quantity
{
    font-size: 1em;
}
.CheckoutNowButton
{
font-size: 1em;
    font-family: Arial;
    font-weight: bold;
    background-image: url('https://www.championsondisplay.com/skins/Skin_9/images/checkout_now.png');
    width: 269px; 
    height: 36px;
    padding-left: 25px;
    margin: 0px;
}
.ContinueShoppingButton
{
font-size: 1em;
    font-family: Arial;
    font-weight: bold;
    background-image: url('https://www.championsondisplay.com/skins/Skin_9/images/continue_shopping1.png');
    width: 130px; 
    height: 23px;
    padding-left: 1px;
    margin: 0px;
}
.UpdateCartButton
{
font-size: 1em;
    font-family: Arial;
    font-weight: bold;
    background-image: url('https://www.championsondisplay.com/skins/Skin_9/images/update_cart.png');
    width: 100px; 
    height: 25px;
    padding-left: 33px;
    margin: 0px;
}
.CartDeleteButton 
{
    font-size: 1em;
    font-family: Arial;
    font-weight: bold;
    background-image: url('https://www.championsondisplay.com/skins/Skin_9/images/delete_btn.png');
    width: 100px; 
    height: 25px;
    padding-left: 15px;
    margin: 0px;
}

The suggestion was to use

#MainImage{
       background:url(Images/MainImageBar.jpg);

however, when making this change the buttons quit appearing in FF as well and never appeared in ie. Not even sure what relevance this had on adding a custom image for each individual button but it didn't work regardless.

Is it possible to set #MainImage for each individual button and if so how would I add that? I tried this earlier as well and wasn't successful with it.

Any help or suggestions would be greatly appreciated. You can see the difference in either browser using this link: Cart Page

-

Lisa

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 32 weeks 1 hour ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Validate!

Verschwindende wrote:
  • CSS doesn't make pies