Question

I try to use multiple backgorunds with CSS3 PIE. It works perfect with IE7, but it doesn’t in IE8. I mean in IE8 I can use no-repeat, repeat and repeat y, but browser doesn’t render repeat-x backgrounds. Is it a bug? Here is some code:

#footer .links li {
    background: url('../images/common/border_dashed.png') repeat-x, 
                url('../images/common/bullet_marker2.png') 9px 17px no-repeat;
    -pie-background: url('_ui/images/common/bullet_marker2.png') 9px 17px no-repeat, 
                     url('_ui/images/common/border_dashed.png') repeat-x;
    behavior: url(PIE.htc);
}

I tried with bottom / top and position in pixels. I was also experimenting with z-index and position values.

Answer 1

OK, I don’t know what’s the real problem in ie8, but here is solution. For IE7 CSS3 PIE works great, and I noticed, that IE8 has support for :before :). So I used it to add new block element with background and apropriate dimensions. It was still not displaying, so after few minutes of experimenting, I found that content: “” solves this. Here is my code for few backgrounds (top line in footer and lines between <li> in footer):

.ie8 #footer:before {
    content: "";
    display: block;
    width: inherit;
    height: 10px;
    background: url('../images/common/border_dashed.png') 0 4px repeat-x;
}

.ie8 #footer li {
    position: relative;
}

.ie8 #footer .nav li a:before,
.ie8 #footer .procedures li a:before,
.ie8 #affiliations ul:before {
    content: "";
    position: absolute;
    display: block;
    width: 212px;
    height: 1px;
    background: url('../images/common/border_dashed.png') 0 0 repeat-x;
}

.ie8 #footer .nav li a:before,
.ie8 #footer .procedures li a:before {
    margin: -10px 0 0 -27px;
}

.ie8 #affiliations ul:before {
    margin-top: -5px;
}