
Border Radius for li is not working in IE 7 and IE 8
My CSSCode:
@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 isCode:
<!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