CSS3 PIE Forums
http://css3pie.com/forum/

in IE8 border with border-radius disappears (is not rendered
http://css3pie.com/forum/viewtopic.php?f=3&t=1432
Page 1 of 1

Author:  timrichardson [ Sun Dec 18, 2011 8:34 pm ]
Post subject:  in IE8 border with border-radius disappears (is not rendered

I have PIE.htc in /pie
I have this style applied inline:
Code:
<div style="background: rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
padding: 10px;
border: 2px solid gray;
border-radius: 5px;
behavior: url('/pie/PIE.htc');">

which means i aim for a gray rounded border around a semi-transparent background.

without pie in IE8, the opacity and border work as expected, (ie the border is not rounded).
With pie, the border is not seen (the semi-transparent background still works)

I know the URL to PIE.htc is fine because if I introduce an error in the path, it falls back to the same behavior as pie not being used at all: border visible with hard corners.

My version of PIE was downloaded an hour ago: 1.0beta5

I am a newbie. Thanks for any tips. PIE looks like a an extremely elegant solution.

Author:  Tonttu [ Mon Dec 19, 2011 6:51 am ]
Post subject:  Re: in IE8 border with border-radius disappears (is not rend

Try removing that filter-rule.

Author:  jjmonterey [ Mon Dec 19, 2011 7:49 pm ]
Post subject:  Re: in IE8 border with border-radius disappears (is not rend

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

Author:  jason [ Mon Dec 19, 2011 9:21 pm ]
Post subject:  Re: in IE8 border with border-radius disappears (is not rend

Please read the documentation and see the examples for using linear-gradient in -pie-background. The demo on the css3pie.com homepage uses it, for example.

http://css3pie.com
http://css3pie.com/documentation/suppor ... #gradients

Author:  koivo [ Wed Mar 12, 2014 9:09 am ]
Post subject:  Re: in IE8 border with border-radius disappears (is not rend

Try adding
Code:
position: relative;
z-index: 0;

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/