IE problem using Nifty Corners

If there is anyone out there that can help me with this I will be soo thankful. I am relatively new to CSS most of my experience is in Databases. I am trying to create a site for my college rugby team and my design is to have horizontal tabs with a horiz sub menu for the selected tab. Furthermore, my personal preferance is to have curved corners, and to keep bandwidth down I decided to use Alessandro Fulciniti's Nifty Corners Cube (http://www.html.it/articoli/niftycube/index.html).

I was developing in FF and everything was moving forward and looking good, THEN I decided to double check my things in IE and BAM everything is messed up. I have deduced that it has something to do with the CSS and the rounded corners.

I only hope that someone is out there that can help me. Below is the simplified CSS file and the HTML file.

The HTML will look fine in FF and IE (v6) but when I execute the Nifty function (which curves the corners) things go haywire.

I want paste the Nifty code you can just download it from the above url.

Thank you to ANYONE who can shed some light on this.

CSS


/*globalnav*/BODY {
padding: 10px 40px;
margin:0;
font-family: arial, geneva, lucida, sans-serif;
}
#globalnav {
position:relative;
float:left;
width:100%;
padding:0 0 1.75em 1em;
margin:0;
list-style:none;
line-height:1em;
}
#globalnav LI.topMenu, #globalnav LI.topSelected {
float:left;
margin:0;
padding:0px 0px 0px 10px;
}
#globalnav LI.topSelected {
text-decoration:underline;
}
#globalnav A {
display:block;
color:#444;
text-decoration:none;
font-weight:bold;
background:#ddd;
margin:0;
padding:0.25em 1em;
border-bottom:1px solid #BBB;
}
#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
background:#bbb;
}
#globalnav A.here:link,
#globalnav A.here:visited {
position:relative;
z-index:102;
}
/*subnav*/
#globalnav UL {
position:absolute;
left:0;
top:1.5em;
float:left;
background:#bbb;
width:100%;
margin:0;
padding:0.25em 0.25em 0.25em 1em;
list-style:none;
border-top:1px solid #fff;
}
#globalnav UL LI {
float:left;
display:block;
margin-top:1px;
}
#globalnav UL A {
background:#bbb;
color:#fff;
display:inline;
margin:0;
padding:0 1em;
border:0
}#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
color:#444;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<link rel="stylesheet" type="text/css" href="testMenuCSS.css" media="screen"/><link rel="stylesheet" type="text/css" href="niftyCorners.css"/>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
 window.onload=function() {
 // Nifty("LI.topSelected a", "top transparent");
 // Nifty("LI.topMenu a", "top transparent");
}
</script>
</head><body>
<ul id="globalnav">
 <li class='topMenu'><a href="#">Home</a></li>
 <li class='topSelected'><a href="#" class="here">About</a>
 <ul>
 <li><a href="#">Vision</a></li>
 <li><a href="#">Team</a></li>
 <li><a href="#">Culture</a></li>
 <li><a href="#">Careers</a></li>
 <li><a href="#" class="here">History</a></li>
 <li><a href="#">Sponsorship</a></li>
 </ul>
 </li>
 <li class='topMenu'><a href="#">News</a></li>
 <li class='topMenu'><a href="#">Proof</a></li>
 <li class='topMenu'><a href="#">Process</a></li>
 <li class='topMenu'><a href="#">Expertise</a></li>
 <li class='topMenu'><a href="#">Help</a></li>
</ul>
</body>
</html>

IE problem using Nifty Corners

Very Frustrated!

spoons10

tedster

spoons10

mehh

spoons10

agict

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week