цвет фона не отображается в Internet Explorer и Opera

Question

Это меню прекрасно работает, за исключением того, что мой фон исчезает в Opera и Internet Explorer, и любые советы по лучшей совместимости с Explorer были бы замечательными.

Он также использует foundation.css из базового фреймворка, если вы знакомы с ним.

Если вы хотите увидеть это в действии: http://www.pink -realty.com

    .elephant-menu {
        width: 100% !important;
        height: 40px;
        z-index: 50 !important;
        opacity: 1;
        background: url(../images/misc/button-gloss.png) repeat-x 0 -34px, -moz-linear-    gradient(top, rgba(255,255,255,.4) 0%, transparent 100%) #e51d9b;
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255,255,255,.5);
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255,255,255,.5);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255,255,255,.5);
        text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
        background: url(../images/misc/button-gloss.png) repeat-x 0 -34px, -webkit-    gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(transparent)) #e51d9b;
        border: 1px solid rgba(229, 33, 155, 1);
        -webkit-transition: background-color .15s ease-in-out;
        -moz-transition: background-color .15s ease-in-out;
        -o-transition: background-color .15s ease-in-out;
        text-transform: capitalize;
        font: 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        margin-left: 0;
        margin-right: 0;
       }

    .elephant-menu li { 
    list-style-type: none !important;
    text-transform: capitalize !important;
    font-weight: bold;
    color: white !important;
    text-decoration: none !important;
    float: left !important;
    position: relative !important;
    font-size: 16px;
    padding: 11px 5px 10px;
    display: block;
   }

   .elephant-menu li:hover {
    color: white;
    background-color: #9c126f;
    -moz-box-shadow: inset 0 2px 5px black;
    -webkit-box-shadow: inset 0 2px 5px black;
    box-shadow: inset 0 2px 5px black;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
   }

   .elephant-menu a {
    color: white;
    text-decoration: none;
   }

Answer 1

попробуйте добавить что-то вроде этого .. измените ваши цвета и альфа.

.elephant-menu {
 background-image: -o-linear-gradient(top, #FFFFFF 0px, #E5219B 70%);
}