Similar issue using Drupal CSS3PIE module and Omega subtheme with following css in Custom stylesheet:
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 67%, rgba(221,247,220,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(67%,rgba(255,255,255,1)), color-stop(100%,rgba(221,247,220,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 67%,rgba(221,247,220,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 67%,rgba(221,247,220,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 67%,rgba(221,247,220,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,1) 67%,rgba(221,247,220,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ddf7dc',GradientType=0 ); /* IE6-9 */
border-color: #DDDDDD #BBBBBB #BBBBBB #DDDDDD;
border-radius: 8px 8px 8px 8px;
border-style: solid;
border-width: 3px;
-moz-box-shadow: 0 0 10px 10px #666;
-webkit-box-shadow: 0 0 10px 10px #666;
box-shadow: 0 0 10px 10px #666;
}
After entering the id: #zone-branding in the CSS3PIE configuration interface in D7, the box shadow renders as expected but the radius corners appear to not render, but closer examination shows that the background gradient is rendering over the top of the corners. See image: gradient background covering rounded corner.jpg
When the background gradient code is deleted and the background is white the corners render properly as per image: corner with no background gradient.jpg
#zone-branding {
background-color: #fff;
border-color: #DDDDDD #BBBBBB #BBBBBB #DDDDDD;
border-radius: 8px;
border-style: solid;
border-width: 3px;
-moz-box-shadow: 0 0 10px 10px #666;
-webkit-box-shadow: 0 0 10px 10px #666;
box-shadow: 0 0 10px 10px #666;
}
If I want a background gradient how do I render it in IE without obscuring the rounded corners?
| Attachments: |
corner with no background gradient.jpg [1.62 KiB]
Not downloaded yet |
|
gradient background covering rounded corner.jpg [1.11 KiB]
Not downloaded yet |