Background-Image an Gradient doesn't work together
Hi,
at first: PIE is an great Project
I Like it very much because it helps to use the most important CSS3-Featueres in a very comfotable way. And it ist working stable so I didn't need a lot of help out of the documentation yet. So a big Thank You first of all
))))
I am not quite sure if this is a problem in PIE2Alpha or if I am wrong myself.
In the CSS are a gradient-color and a background-image given together for an element.
Following CSS:
Code:
#infobar-outer {
position: relative;
color: #DDDDDD;
background-color: #4B5B71; /* Fallback Non-CSS3-Browsers */
background-image: url(bg_relieflinie_infobar.png); /* Fallback Non-CSS3-Browsers */
background-repeat: repeat-x; /* Fallback Non-CSS3-Browsers */
background:
url(bg_relieflinie_infobar.png) repeat-x,
-webkit-linear-gradient(-75deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%); /* Chrome10+, Safari5.1+ */
background:
url(bg_relieflinie_infobar.png) repeat-x,
-moz-linear-gradient(-75deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%); /* firefox 3.6+ */
background:
url(bg_relieflinie_infobar.png) repeat-x,
-o-linear-gradient(-75deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%); /* opera 11.10+*/
background:
url(bg_relieflinie_infobar.png) repeat-x,
linear-gradient(165deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%); /* future browsers*/
-pie-background:
url(bg_relieflinie_infobar.png) repeat-x,
linear-gradient(165deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%); /* PIE: IE6-9 */
behavior: url(http://www.dermarketingmacher.com/css3pie/PIE.htc);
}
The Problems are:
- IE9 shows the gradient but not the Background-Image
- IE7+8 doesn' show both (no background-image and no gradient) and doesn't also show now background-color btw. a white background-color instead
- IE6 is not relevatn to me
Tested with IE-Tester
Additional:
Without the background-image al the IEs shows the Gradient-Color proper
Without the gradient the IEs shows the Background-Image proper
Can it be a Problem with this combination in PIE2Alpha or am I wrong in my Code?
Known Issus:
The Element which ist designed by PIE has position relative
Yout can visit the Page with deactivatede PIE for the special Element (#infobar-outer) on:
http://www.dermarketingmacher.comThanks for every tip.
Yetiie
Forums
