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

Border Radius for li is not working in IE 7 and IE 8
http://css3pie.com/forum/viewtopic.php?f=3&t=1917
Page 1 of 1

Author:  yuvarajcp [ Wed Dec 05, 2012 5:49 am ]
Post subject:  Border Radius for li is not working in IE 7 and IE 8

My CSS

Code:
@charset "utf-8";
/* CSS Document */
#wrapper{padding:0; margin:0; width:982px; margin:0 auto; height:800px; background-color:#e0e0e0;}
#header{height:147px; width:100%; background:url(header.jpg) repeat-x top left;}
#logo{ height:115px;}
#bar{height:4px;}

#menu1-container{padding-left:3px;}
#menu1 ul{float:left; font-size:12px;}
#menu1 ul li{float:left;}
#menu1 li a:link, #menu1 li a:active, #menu1 li a:visited{display:block;padding:8px 5px 8px 5px; color:#539ed7; background:#fff; margin-right:3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
behavior: url(PIE.htc);

}
#menu1 li a:hover{background:#80bbe7 !important; color:#fff;}

#menu2-container{ background:#539ed7; padding-bottom:3px; height:25px;}
#menu2{padding-left:3px;height:25px; margin-top:0; float:left;}
#menu2 ul{float:left; font-size:12px}
#menu2 ul li{float:left;}
#menu2 li a:link, #menu2 li a:active, #menu2 li a:visited{display:block; padding:6px 5px 6px 5px; color:#fff; margin-right:3px;}
#menu2 li a:hover{background:#02336b; color:#fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url(PIE.htc);

}

And my HTML is
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Untitled Document</title>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
<link href="reset.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

   <div id="header">
       <div id="logo"></div>
       
        <div id="menu1-container">
          <div id="menu1">
             <ul>
              <li><a href="#">Portfolio 1</a></li>
               <li><a href="#">Portfolio 2</a></li>
               <li><a href="#">Portfolio Management</a></li>
               <li><a href="#">Portfolio view</a></li>
               <li><a href="#">Search</a></li>
              </ul>
         </div><!--menu1 ends-->
        </div>
       
       <div id="bar"></div>
      </div><!--header ends-->
   
    <div id="menu2-container">
       <div id="menu2">
           <ul>
               <li><a href="#">link1</a></li>
               <li><a href="#">link2</a></li>
               <li><a href="#">link3</a></li>
               <li><a href="#">link4</a></li>
               <li><a href="#">link5</a></li>
         </ul>
        </div><!--menu2 ends-->
    </div><!--menu2-container ends-->

</div>
</body>
</html>

<br/>

Rounded corner for li is not working in IE 7 and IE 8. Please somebody give me the solution to fix this.
Note: i have PIE.htc file, .css file and .html file in the same folder

Author:  janice [ Wed Apr 24, 2013 3:08 am ]
Post subject:  Re: Border Radius for li is not working in IE 7 and IE 8

I too am having this issue if anyone can shed any light?

Author:  janice [ Thu Apr 25, 2013 2:07 am ]
Post subject:  Re: Border Radius for li is not working in IE 7 and IE 8

OK, i sorted it and it was nothing to do with the <li>, it was simply a paths issue. Once i'd added the absolute path to the PIE.htc everything worked as expected.
So it might be worth trying to add the absolute path in your css.

Author:  Ila [ Fri May 31, 2013 6:25 am ]
Post subject:  Re: Border Radius for li is not working in IE 7 and IE 8

I have the same problem, but changing to absolute path, does not change anything. I have several different classes and PIE works fine with divs, but not with list <li> and tables. Any idea why?

Author:  Sladix [ Tue Jun 03, 2014 1:12 am ]
Post subject:  Re: Border Radius for li is not working in IE 7 and IE 8

Same problem here too ...
Any idea to solve this ? I've set absolute path too...

EDIT : I found the solution ! I didn't set my elements to posision:relative and the css3pie element was having a z-index problem

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