Hi friends,
I managed to create a rounded corner box using css. It works fine in IE but not working as expected in Firefox.
Please check this link
http://www.einternals.com/ee/css2/eeindex.htmlthis is the 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=iso-8859-1" />
<title></title>
<style>
#imgright
{
width:100%;
background-image: url(navright1.gif);
background-repeat: no-repeat;
background-position: right;
}
#imgleft
{
width:100%;
background-image: url(navleft1.gif);
background-repeat: no-repeat;
background-position: left;
}
#nav {
float:left;
height: 25px;
width:100%;
/*border: 1px solid #CEE9FF;*/
vertical-align:middle;
background-image: url(menubgblue1.gif);
background-repeat: repeat-x;
}
#nav li,a{
display: inline;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
font-size:13px;
float:left;
list-style:none;
padding: 0;
margin: 0;
}
#nav li{
padding:5px;
top:0;
}
#nav ul{
top:0px;
margin:0px;
}
#nav ul li a {
top:0px;
margin:0px;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
font-size:13px;
padding-left:5px;
padding-right:5px;
padding-top:0;
padding-bottom:0;
}
#nav ul li a:hover, #nav ul li a:focus {
background-color:#fff;
padding-left:5px;
padding-right:5px;
padding-top:0;
padding-bottom:0;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="45">
<br />
<br />
<br />
<div id="container">
<div id="nav">
<div id="imgright">
<div id="imgleft">
<ul>
<li></li>
<li><a href="#">Home </a></li>
<li>|</li>
<li><a href="#">Gallery</a></li>
<li>|</li>
<li><a href="#">Media </a></li>
<li>|</li>
<li><a href="#">Help</a></li>
<li>|</li>
</ul>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
thanx in advance
kiranvj
Start Free Trial
