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



Reply to topic  [ 3 posts ] 
 IE8 - css filter gradient --- rounded corners not working 
Author Message

Joined: Tue Oct 11, 2011 10:44 am
Posts: 5
Post IE8 - css filter gradient --- rounded corners not working
Trying to get the following to work WITH gradient... when I remove the filter the corner rounds as it should. With the filter it does not... in IE6-8 of course.
Code:
nav ul li a {
               
                display: block;
                float: left;
               
                background: rgb(130,206,242); /* Old browsers */
                background: -moz-linear-gradient(top, rgba(130,206,242,1) 0%, rgba(83,203,241,1) 30%, rgba(0,141,210,1) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,206,242,1)), color-stop(30%,rgba(83,203,241,1)), color-stop(100%,rgba(0,141,210,1))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, rgba(130,206,242,1) 0%,rgba(83,203,241,1) 30%,rgba(0,141,210,1) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, rgba(130,206,242,1) 0%,rgba(83,203,241,1) 30%,rgba(0,141,210,1) 100%); /* Opera11.10+ */
                background: -ms-linear-gradient(top, rgba(130,206,242,1) 0%,rgba(83,203,241,1) 30%,rgba(0,141,210,1) 100%); /* IE10+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cef2', endColorstr='#008dd2',GradientType=0 ); /* IE6-9 */
                background: linear-gradient(top, rgba(130,206,242,1) 0%,rgba(83,203,241,1) 30%,rgba(0,141,210,1) 100%); /* W3C */

            }
            nav .home a:link, nav .home a:visited {
               
                -webkit-border-radius: 20px 0 0 20px;
         -moz-border-radius: 20px 0 0 20px;
              border-radius: 20px 0 0 20px;
         
                        behavior: url(/test2/assets/scripts/libs/PIE.htc);
               
            }


Tue Oct 11, 2011 10:46 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: IE8 - css filter gradient --- rounded corners not workin
I should really add this as a FAQ.

Do not use filters for gradients in conjunction with PIE. Let PIE create the gradient for you using -pie-background:linear-gradient(...)

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


Tue Oct 11, 2011 10:49 am
Profile

Joined: Tue Oct 11, 2011 10:44 am
Posts: 5
Post Re: IE8 - css filter gradient --- rounded corners not workin
ah nice! yes FAQ! hahah... works perfect. thanks.


Tue Oct 11, 2011 11:13 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: Yahoo [Bot] and 1 guest


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:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.