Forums
View unanswered posts | View active topics It is currently Thu Aug 28, 2014 3:09 am



Reply to topic  [ 10 posts ] 
 gradient + border radius in IE9 
Author Message

Joined: Thu Feb 23, 2012 9:00 am
Posts: 2
Post gradient + border radius in IE9
Hello,

I'm having hard time trying to make gradient and border radius work together.
It's working fine in IE8 and IE7 but IE9 not. (pie.htc is indeed loaded)

my CSS rule would be
.class {
border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
background: #3475A7;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3475A7), to(#134260));
background: -webkit-linear-gradient(#3475A7, #134260);
background: -moz-linear-gradient(#3475A7, #134260);
background: -ms-linear-gradient(#3475A7, #134260);
background: -o-linear-gradient(#3475A7, #134260);
background: linear-gradient(#3475A7, #134260);
-pie-background: linear-gradient(#3475A7, #134260);
behavior: url(/PIE.htc);
}

My DIV are rounded but there is no gradient.

Am I missing something here ?


Thu Feb 23, 2012 9:13 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: gradient + border radius in IE9
Code looks fine. Is PIE.htc being served with the correct content-type header?


Thu Feb 23, 2012 9:56 am
Profile

Joined: Thu Feb 23, 2012 9:00 am
Posts: 2
Post Re: gradient + border radius in IE9
Correct answer, I forgot to add the htc extension it's working thanks a lot for your quick answer !


Thu Feb 23, 2012 10:23 am
Profile

Joined: Tue Mar 13, 2012 3:30 pm
Posts: 1
Post Re: gradient + border radius in IE9
Jason,

I am having similar issues... I don't understand your response:
jason wrote:
Code looks fine. Is PIE.htc being served with the correct content-type header?

I have the gradient showing up as well, however, the gradient "leaks" out at the corners. It seems like the gradient wasn't notified of the corners being rounded.
here's my CSS:

.buttons img {
border-radius:15px;
border:1px solid #3b3b3b;
box-shadow:3px 3px 2px #888888;
padding:1px;
margin-right:5px;

background: -webkit-linear-gradient(top, #f0f0f0, #ffffff);
background: -ms-linear-gradient(top, #fofofo, #ffffff);
background: -moz-linear-gradient(top, #f0f0f0, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#ffffff');
behavior: url(PIE.htc);
}

Thanks!


Tue Mar 13, 2012 3:34 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: gradient + border radius in IE9
@elig: filters cannot work with rounded corners. Use PIE's gradient syntax.


Tue Mar 13, 2012 4:42 pm
Profile

Joined: Tue Feb 12, 2013 1:03 pm
Posts: 1
Post Re: gradient + border radius in IE9
Just use a wrapper div (rounded & overflow hidden) to clip the gradient radius for IE9. Simple, works cross-browser. No need for SVG, PIE, JS, or conditional comments. ;)

Code:
<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>
   
.ie9roundedgradient {
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
.roundedgradient {
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
/* use colorzilla to generate your cross-browser gradients */
}


Tue Feb 12, 2013 1:05 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: gradient + border radius in IE9
@BrianLewisDesign Good point, that will work too, as long as your gradients are simple enough for the filter syntax. If your gradient is more complex, e.g. more than two stops, stops that aren't at the edges, using colors with an alpha channel, or a gradient at an angle, then the filter syntax falls short. Also overflow:hidden isn't always an option, e.g. if there are child elements that are absolutely positioned outside the parent's bounds.


Tue Feb 12, 2013 3:42 pm
Profile

Joined: Fri Feb 15, 2013 5:19 am
Posts: 16
Post Re: gradient + border radius in IE9
FYI webkit and moz prefix are no more neccessary for border-radius : http://caniuse.com/#feat=border-radius


Sat Feb 16, 2013 8:25 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: gradient + border radius in IE9
"No longer necessary"... that depends on your audience. It's best not to generalize.


Sat Feb 16, 2013 8:49 am
Profile

Joined: Thu Feb 21, 2013 3:51 pm
Posts: 1
Post Re: gradient + border radius in IE9
This is my first time trying PIE, I too do not understand what is meant by "Is PIE.htc being served with the correct content-type header?" How do I know that pie.htc is even being loaded. I am not seeing the gradient nor the border-radius.

Code:
.gradient (@color; @color2) {
   background: -moz-linear-gradient(center top,  @color 5%, @color2 1); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05,@color), color-stop(1, @color2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  @color 5%,@color2 1); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  @color 5%,@color2 1); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  @color 5%,@color2 1); /* IE10+ */
    background: linear-gradient(to bottom,  @color 5%,@color2 1); /* W3C */
   -pie-background: linear-gradient(to bottom #ffaf59, #e88126);
   behavior: url(localmy.familytreedna.com/pie/PIE.htc);
}
.border-radius (@radius: 6px, @color: #ffaf59, @w: 1px) {
   border-radius: @radius;
   -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
   border-color: @color;
   border-width: @w;
   behavior: url(/pie/PIE.htc);
}
.smButtonOrange:link, .smButtonOrange:visited, .smButtonOrange, a.orderNowLink:link, a.orderNowLink:visited
{
   .boxShadow(1px, 1px, 0, 0, #ebebeb);
   .gradient (#ffaf59, #e88126);
   background-color: #ffaf59;
   .border-radius;

}

I would have rathered use the filter as it has worked for me before on our site with no complaints, however is was not working. Could the problem be my .less code? Ugh it works fine in chrome... Any suggestions?


Thu Feb 21, 2013 3:58 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 10 posts ] 

Who is online

Users browsing this forum: Google [Bot] and 3 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.