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

Question

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

Seems like this one's been pretty well answered, but I'd like to add:

Works in IE:

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

Works in Firefox and Chrome but does not work in IE:

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

Without knowing IE needs that space (which seems like very marginal formatting) you can waste seeerious time, non?

Answer 2

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 3

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 4

In Internet Explorer, URL inside CSS is relative to current page. in other browsers, URL inside CSS is relative to the CSS location. It is better to use fix URL for both. If you use Java servlet you can use dummy URL and handle the request in background from the servlet.