background linear gradients make background go away
I'm using overloaded background-image shortform to do background images and a linear gradient because otherwise it breaks everywhere. Like so:
Code:
article.mainContent{
position:relative;
z-index:5;
display:block;
min-height:1080px;
-moz-box-shadow: 5px 5px 25px #000;
-webkit-box-shadow: 5px 5px 25px #000;
box-shadow: 5px 5px 25px #000;
}
article.mainContent{
background-image: url('/images/bg_mainContent_dots.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(188,188,188)));
background-position: left top, left top;
background-repeat: repeat-y, repeat;
}
article.mainContent{
background-image: url('/images/bg_mainContent_dots.png'), -moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(188,188,188) 100%);
}
article.mainContent{
background-image: url('/images/bg_mainContent_dots.png'), linear-gradient(left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(188,188,188)));
behavior: url(/css/PIE.htc);
}
My box-shadowy bits are working but the linear gradient/background is borking. I get a transparent background with the VML object for box-shadow showing through.
Thoughts? I'm thinking I've got a syntactical quirk that was unanticipated. Merging the overloaded .mainContent blocks into one makes no difference. I had PIE in the first block and in an external IE less than 9 file and box-shadow was working in those cases too.
I'm using html5shiv first thing and then these bits, and the shadow's ok so I think html5 article tag is in the dom when the .htc bits do their magic.
Forums
