Home/ Questions/Q 5938963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:45:33+00:00

I’m having a few issues with my background not showing for my button elements.

  • 0

I’m having a few issues with my background not showing for my button elements.

Here’s my CSS code:

button.button-master-lite, a.button-master-lite {
    background: #92AE41;
    background: -moz-linear-gradient(top, #89A73E 0%, #92AE41 100%);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#89A73E), to(#92AE41));

    border: 1px solid #89A73E;
    border-bottom: 1px solid #92AE41;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    -moz-box-shadow: inset 0 1px 0 0 #92AE41;
-webkit-box-shadow: inset 0 1px 0 0 #92AE41;
    box-shadow: inset 0 1px 0 0 #92AE41;

    color: #fff;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 11px;
    font-weight: bold;
    line-height: 1;

    padding: 5px 8px 6px 8px;
    text-align: center;
    text-shadow: 0 -1px 0 #5D862F;
    width: auto;
}

And here’s my HTML:

<a class="button-master-lite" href="#">Order Now</a>

With IE 6 and IE 7 the background-color does not show. However, when I take off the other background declarations except the first one, the background shows.

The HTML page I have this button on has a number of divs and sub-divs with floats and position style elements, but I can’t figure out which one is causing the issue. I tried putting the code on a completely blank page with only my stylesheet and it worked ok.

Is there anything in particular that would be causing the background not to show when I have other background declarations for other browsers?! Does it have anything to do with floats or other positioning elements?

I’d appreciate some assistance. Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try using background-color and background-image properties like so:

    button.button-master-lite, a.button-master-lite {
    background-color: #92AE41;
    background-image: -moz-linear-gradient(top, #89A73E 0%, #92AE41 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#89A73E), to(#92AE41));
    border: 1px solid #89A73E;
    border-bottom: 1px solid #92AE41; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; -moz-box-shadow: inset 0 1px 0 0 #92AE41;
    -webkit-box-shadow: inset 0 1px 0 0 #92AE41; 
    box-shadow: inset 0 1px 0 0 #92AE41; 
    color: #fff; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    font-size: 11px; 
    font-weight: bold; 
    line-height: 1; 
    padding: 5px 8px 6px 8px; 
    text-align: center; 
    text-shadow: 0 -1px 0 #5D862F; 
    width: auto;
}
    • 0