[jQuery] jQuery with jquery.corners displaying differently in IE6 than FF
I have a horizontal menu that with the use of jQuery and a plug in
jquery.corner.js I am rounding the upper left corner. It appears fine
in FF but fails to work properly in IE6. Also, in FF the area to click
on is very small - not even the width/height of the text. Is this due
to the numerous divs that are added?
Here is the HTML:
HTML Code:
<div id="header">
<div id="nav_wrapper">
<div id="nav">
<ul>
<li><a href="/apply/">APPLY</a></li>
<li class="divider">|</li>
<li><a href="/teach/">FOR TEACHERS</a></li>
<li class="divider">|</li>
<li><a href="/schools/">FOR SCHOOLS</a></li>
<li class="divider">|</li>
<li><a href="/about/">ABOUT VIF</a></li>
</ul>
</div><!-- End Nav -->
</div>
</div><!-- End Header -->
And here is the relevant CSS:
CSS Code:
#header {
background-image:url(/images/sitewide/header.gif);
background-repeat:no-repeat;
height:110px;
width:820px;
text-align:right;
}
#nav_wrapper {
background:#007ec4;
display:inline;
}
#nav {
margin-top:79px;
margin-right:3px;
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
display:inline;
padding:0px;
}
#nav ul {
list-style:none;
display:inline;
padding-left:7px;
margin:0px;
background:#ffffff;
}
#nav li {
display:inline;
padding: 0px 5px;
}
#nav .divider {
color:#0065bd;
}
When I look at the page with the IE dev toolbar it shows the div
stretching all the way across the header width. Is this because that
is the only div with a width? If I try to set a width in either
nav_wrapper or nav it still does not give me the rounded corner and it
also starts to break in FF.
Any suggestions?
Thanks,
Dan