CSS background url () not appearing in IE, works in FF/Safari

Question

Hello All,

I'm debugging my website for the dreaded IE6 but I'm officially stumped.

Appearance in Firefox: http://dl-client.getdropbox.com/u/5822/firefox.tiff

Appearance in IE6: http://dl-client.getdropbox.com/u/5822/ie6.tiff

Live site: Motolistr.com

The following CSS works great in FF and Safari, but doesn't in IE6.

#search_sort{
background-image:url('../images/nav/bg-form.jpg');
padding:10px; 
border:1px solid #d13a3b;
margin-top:5px;
}

The following CSS DOES WORK in IE6, and it seems identical...(wtf)

#email_seller{
border:1px solid #d13a3b;
background-image:url('../images/nav/email-form-bg.jpg');
}

Also, my link/span button doesn't appear either- I assume this is the same type of issue.

a.button {
    background: transparent url('../images/nav/button_bg_right4.gif') no-repeat scroll top right;
    color: #000;
    display: block;
    float: left;
    font: normal 18px arial, sans-serif;
    height: 36px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('../images/nav/button_bg4.gif') no-repeat;
    display: block;
    line-height: 24px;
    padding: 5px 0 7px 18px;
}

Any ideas?

Thanks, Nick

Answer 1

The order of attributes are wrong as i see. You need to put transparent in the beginning.

background:transparent url('../images/nav/button_bg4.gif') no-repeat;

Answer 2

The background property shorthand order is: colour image repeat position attachment

I suggest you correct to that format providing all properties, and if that fails (and you can confirm that the style is applied) try modifying your image path up and down to see if your base location is what you think it is.

Answer 3

in IE, url inside CSS is relative to current page. in others, url inside CSS is relative to the CSS. You better use fix url for both. If you use Java serlvet you can use dummy url and handle the request of background from the servlet.