Forums
View unanswered posts | View active topics It is currently Fri Apr 18, 2014 5:31 pm



Reply to topic  [ 4 posts ] 
 Navigation bar round corners IE8 [SOLVED: Gradient filter] 
Author Message

Joined: Fri Dec 09, 2011 10:25 am
Posts: 4
Post Navigation bar round corners IE8 [SOLVED: Gradient filter]

Problem solved by replacing:
Code:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddf74e, endColorstr=#abcb3f);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddf74e, endColorstr=#abcb3f)";

With:
Code:
-pie-background: linear-gradient(top, #bdd2ff, #71afdd);



Could someone please have a quick look at my code! Why rounded corners are not working in a simple block menu created with <ul> <li> and a bit of css, using Internet Explorer 8. Thanks!!

the index.html:

http://www.takonoashi.net/project-roundmenu/index.html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Project Round Menu (CSS3 PIE)</title>
<link href="makeitround.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul class="cssmenu">
   <li class="menu">
      <a class="selected" href="." title="link1">link1</a></li>
   <li class="menu">
      <a href="." title="link2">link2</a></li>
   <li class="menu">
      <a href="." title="link3">link3</a></li>
   <li class="menu">
      <a href="." title="link4">link4</a></li>
   <li class="menu">
      <a href="." title="link5">link5</a></li>
   <li class="menu">
      <a href="." title="link6">link6</a></li>
</ul>


</body>
</html>


the css file:

http://www.takonoashi.net/project-roundmenu/makeitround.css

Code:
@charset "UTF-8";

ul.cssmenu {
list-style: none;
padding: 0px;
position: relative;
        }
      
ul.cssmenu li {
float: left;
        }
      
ul.cssmenu li a {
display: inline-block;
width: 110px;
height: 33px;
color: #0000;
text-decoration: none;
text-align: center;
padding-top: 10px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 0px;
margin-right: 1px;
margin-top: 0;
position: relative;
-webkit-border-radius: 1em 1em 0 0;
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
border: 0;
behavior: url(http://www.takonoashi.net/project-roundmenu/PIE.htc);
}

ul.cssmenu li.menu a {
position: relative;
background: #abcb3f;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddf74e), to(#abcb3f));
background: -webkit-linear-gradient(top, #ddf74e, #abcb3f);
background: -moz-linear-gradient(top, #ddf74e, #abcb3f);
background: -ms-linear-gradient(top, #ddf74e, #abcb3f);
background: -o-linear-gradient(top, #ddf74e, #abcb3f);
background: linear-gradient(top, #ddf74e, #abcb3f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddf74e, endColorstr=#abcb3f);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddf74e, endColorstr=#abcb3f)";
}

ul.cssmenu li.menu a:hover {
position: relative;
background: #abcb3f;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bdd2ff), to(#71afdd));
background: -webkit-linear-gradient(top, #bdd2ff, #71afdd);
background: -moz-linear-gradient(top, #bdd2ff, #71afdd);   
background: -ms-linear-gradient(top, #bdd2ff, #71afdd);   
background: -o-linear-gradient(top, #bdd2ff, #71afdd);     
background: linear-gradient(top, #bdd2ff, #71afdd);       
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bdd2ff, endColorstr=#71afdd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#bdd2ff, endColorstr=#bdd2ff)";
        }     
   
ul.cssmenu li.menu a:active {
position: relative;
background: #abcb3f;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddf74e), to(#abcb3f));
background: -webkit-linear-gradient(top, #ddf74e, #abcb3f);
background: -moz-linear-gradient(top, #ddf74e, #abcb3f);   
background: -ms-linear-gradient(top, #ddf74e, #abcb3f);   
background: -o-linear-gradient(top, #ddf74e, #abcb3f);     
background: linear-gradient(top, #ddf74e, #abcb3f);       
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddf74e, endColorstr=#abcb3f);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddf74e, endColorstr=#abcb3f)";
        }       

ul.cssmenu li.menu a.selected {
position: relative;
background: #abcb3f;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bdd2ff), to(#71afdd));
background: -webkit-linear-gradient(top, #bdd2ff, #71afdd);
background: -moz-linear-gradient(top, #bdd2ff, #71afdd);   
background: -ms-linear-gradient(top, #bdd2ff, #71afdd);   
background: -o-linear-gradient(top, #bdd2ff, #71afdd);     
background: linear-gradient(top, #bdd2ff, #71afdd);       
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bdd2ff, endColorstr=#71afdd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#bdd2ff, endColorstr=#bdd2ff)";
        }


Last edited by chiappa on Fri Dec 09, 2011 4:30 pm, edited 2 times in total.



Fri Dec 09, 2011 10:34 am
Profile

Joined: Tue May 17, 2011 1:35 pm
Posts: 27
Post Re: Simple block menu round corners not working on IE8
Chiappa,

A quick thought: I have had problems using css3pie and ms filters together. Try commenting out the filter/-ms-filter lines and see if that works.

Dick


Fri Dec 09, 2011 3:52 pm
Profile

Joined: Fri Dec 09, 2011 10:25 am
Posts: 4
Post Re: Simple block menu round corners not working on IE8
That did the trick. Thank you rsutton!

I also found the same answer on this post:
http://css3pie.com/forum/viewtopic.php?f=3&t=1291&hilit=corners+IE8

The final CSS code:

Code:
@charset "UTF-8"; 

ul.cssmenu {
list-style: none;
padding: 0px;
position: relative;
        }
                 
ul.cssmenu li {
float: left;
        }
               
ul.cssmenu li a {
display: block;
width: 110px;
height: 33px;
color: #0000;
text-decoration: none;
text-align: center;
padding-top: 10px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 0px;
margin-right: 1px;
margin-top: 0;
position: relative;
border: 0;
-webkit-border-radius: 1em 1em 0 0;
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
behavior: url(http://www.takonoashi.net/project-roundmenu/PIE.htc);
}

ul.cssmenu li.menu a {
position: relative;
background: #abcb3f;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddf74e), to(#abcb3f));
background: -webkit-linear-gradient(top, #ddf74e, #abcb3f);
background: -moz-linear-gradient(top, #ddf74e, #abcb3f);
background: -ms-linear-gradient(top, #ddf74e, #abcb3f);
background: -o-linear-gradient(top, #ddf74e, #abcb3f);
background: linear-gradient(top, #ddf74e, #abcb3f);
-pie-background: linear-gradient(top, #ddf74e, #abcb3f);
}

ul.cssmenu li.menu a:hover {
position: relative;
background: #71afdd;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bdd2ff), to(#71afdd));
background: -webkit-linear-gradient(top, #bdd2ff, #71afdd);
background: -moz-linear-gradient(top, #bdd2ff, #71afdd);
background: -ms-linear-gradient(top, #bdd2ff, #71afdd);
background: -o-linear-gradient(top, #bdd2ff, #71afdd);
background: linear-gradient(top, #ddf74e, #abcb3f);
-pie-background: linear-gradient(top, #bdd2ff, #71afdd);
}

 
ul.cssmenu li.menu a:active {
position: relative;   
background: #abcb3f;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddf74e), to(#abcb3f));
background: -webkit-linear-gradient(top, #ddf74e, #abcb3f);
background: -moz-linear-gradient(top, #ddf74e, #abcb3f);   
background: -ms-linear-gradient(top, #ddf74e, #abcb3f);
background: -o-linear-gradient(top, #ddf74e, #abcb3f);
background: linear-gradient(top, #ddf74e, #abcb3f);   
-pie-background: linear-gradient(top, #ddf74e, #abcb3f);
       }       
 
ul.cssmenu li.menu a.selected {
position: relative;
background: #abcb3f;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bdd2ff), to(#71afdd));
background: -webkit-linear-gradient(top, #bdd2ff, #71afdd);
background: -moz-linear-gradient(top, #bdd2ff, #71afdd);   
background: -ms-linear-gradient(top, #bdd2ff, #71afdd);
background: -o-linear-gradient(top, #bdd2ff, #71afdd);
background: linear-gradient(top, #bdd2ff, #71afdd);   
-pie-background: linear-gradient(top, #bdd2ff, #71afdd);
        }


Fri Dec 09, 2011 4:20 pm
Profile

Joined: Wed Jun 12, 2013 11:54 am
Posts: 1
Post Re: Navigation bar round corners IE8 [SOLVED: Gradient filte
THANK YOU THANK YOU THANK YOU!!!

I have been trying to get PIE working for three days!!! nothing was working. I poured over these forums for days. I finally came upon this post, as soon as I commented out the ms filters, and added -pie background with the gradient values, everything worked like a charm! :D


Fri Jun 14, 2013 2:25 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: Bing [Bot], 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.