3

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

4 Answers 4

5

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?

2
  • +1 Yuuuup this worked for me. Using compressed CSS which had removed the space. And oui.
    – Ben
    Nov 20, 2013 at 4:59
  • Definitely a potential problem for anyone using compressed / minified CSS :(
    – DrewT
    Nov 28, 2013 at 22:32
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;
7
  • Even with that changed, it still doesn't make a difference. Feb 4, 2009 at 11:19
  • Hmm did you also try to fix border values. border:solid 1px #ddd; I am not sure about the sliding doors but as far as i know just one of them has display:block; I mean just span or just button I hope it works Feb 4, 2009 at 11:57
  • I forgot to mention about the border, i wanted to say the order of border property: solid 1px #ccc; type | width | color Feb 4, 2009 at 12:00
  • With the border attributes changed, the background still does not appear. Feel free to check at motolistr.com. I'm really really stumped. Feb 22, 2009 at 10:23
  • It is all OK on FF,Chrome. Just IE breaks it up. I ll check it and write you back Feb 22, 2009 at 12:00
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.