css background-image doesn't work on IE?

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

颜色优先：

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