css background-image doesn't work on IE? - html

Question

This css style is working perfectly on all browsers when the site is on LOCALHOST.
but when I uploaded the site to a live server, It also works on all browsers except IE.
The background-image don't show.
.button {
font-family:Arial, Helvetica, sans-serif;
display:inline-block;
position:relative;
background:url(../images/button-bg.gif) 0 0 repeat-x #3b3d3e;
border:1px solid #3b3d3e;
font-size:11px;
color:#fff;
font-weight:bold;
text-decoration:none;
padding:1px 9px;
margin-right:7px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
behavior:url(js/PIE.htc);
}
NOTE: as you can see I use the color #3b3d3e with the background, and when the page loads I see this color for a part of a second, and then it disappears.
what is wrong with this?

Answer 1

I believe background should be written out in this order:
background: color position size repeat origin clip attachment image;
Maybe IE is the only browser that cares?
If that doesn't work maybe try adding each background value you need seperately:
background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.
Also as a side note you might want to try commenting out the last line in the css "behavior:url(js/PIE.htc)". I know sometimes these things like to conflict with other properties. I have never used PIE myself, but its worth a shot commenting out.

Answer 2

Color first:
background: #3b3d3e url(../images/button-bg.gif) 0 0 repeat-x;

Answer 3

Try adding zoom:1 to .button
This triggers the hasLayout property on IE7.
Detailed explanation here:
On having Layout

Answer 4

I think I got it fixed but still don't know what is the reason...
I removed the
behavior:url(js/PIE.htc);
from it, and it worked perfectly...
I'm pretty sure that the file PIE.htc is there but I don't know what is wrong.
anyone??

Answer 5

I haven't tried this on my site yet, because the server has been down but it might be worth looking into Modernizr http://modernizr.com/
I had a hard time getting background images to show moving from local to my server, and what I ended up having to do was use the full path of the image.
If it is infact a browser confliction problem, this should help solve it.
Also, have you tried commenting out behavior:url(js/PIE.htc);?
This could be what's giving it fits.
When i put a background-image in my CSS, I type it like so:
background-image: url("path/to/image.img"); background-repeat:no-repeat;
background-color:#color;
I see you tried this, and I'm trying to think of several options, would working with the Z-index affect what you are trying to do?
Give Modernizr a look over

Answer 6

It may be a relative path issue between localhost and server environment. See the detailed explanation on the CSS 3 PIE known issues page.
http://css3pie.com/documentation/known-issues/#relative-paths
Was PIE working at all? — Were there rounded corners on the button on IE 7?
This may be helpful too.
http://css3pie.com/documentation/known-issues/#z-index