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

advertisements

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


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?