[jQuery] Corners and IE 7 problem
I've used the jQuery Corner plugin for some time now and have always
had an easy time. However, for some reason, I'm running into trouble
now.
The code works perfectly in FF/win, FF/mac, Safari/mac but not IE7/win
(haven't tested anything else). In IE7/win it will only apply the
corners to the side of the element that corresponds to the text
alignment.
For instance:
$("#tabs ul li").corner("top 8px");
Will round the top left corner only when #tabs ul { text-align:
left; }. If centered, the corners apply to both the top left and top
right, but they're centered and reversed (very odd).
Here's everything:
#tabs{
margin-top: 10px;
}
#tabs ul{
margin-left: 50px;
text-align:left;
}
#tabs ul li{
float:left;
margin: 0px 10px;
background-color: #454545;
}
#tabs ul li.active,#tabs ul li.active a,#tabs ul li.hover,#tabs
ul li.hover a{
background-color: #93DAFF;
color: #454545;
}
#tabs ul li a{
color: #fff;
font-weight: bold;
letter-spacing: 1px;
}
#tabs ul li a span{
display:block;
padding: 12px 18px;
}
<div id="tabs">
<ul>
<li><a href="#"><span>Yale University</span></a></li>
<li class="active"><a href="#"><span>Applications</span></a></
li>
<li><a href="#"><span>Statistics</span></a></li>
<li><a href="#"><span>Ciolli</span></a></li>
<li><a href="#"><span>OCI</span></a></li>
</ul>
</div>
Any ideas?