Forums
View unanswered posts | View active topics It is currently Tue Sep 02, 2014 12:44 am



Reply to topic  [ 5 posts ] 
 in IE8 border with border-radius disappears (is not rendered 
Author Message

Joined: Sun Dec 18, 2011 8:26 pm
Posts: 1
Post 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.


Sun Dec 18, 2011 8:34 pm
Profile

Joined: Sat Aug 21, 2010 11:12 am
Posts: 223
Post Re: in IE8 border with border-radius disappears (is not rend
Try removing that filter-rule.

_________________
PIE needs more community support persons! Time is money, which means you can fund PIE development by answering support questions.


Mon Dec 19, 2011 6:51 am
Profile

Joined: Mon Dec 19, 2011 7:18 pm
Posts: 1
Post 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
Mon Dec 19, 2011 7:49 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post 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


Mon Dec 19, 2011 9:21 pm
Profile

Joined: Wed Mar 12, 2014 9:07 am
Posts: 1
Post Re: in IE8 border with border-radius disappears (is not rend
Try adding
Code:
position: relative;
z-index: 0;


Wed Mar 12, 2014 9:09 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.