Hi there,
I have a horizontal navigation (for which I've used a ul) which who's bottom corners (left and right) are rounded. I've used PIE for this and it's worked fine. The only problem is that the li's inside are links and when the first one is selected, the bottom-left corner becomes angled again. I've applied an "li:first-child" styling including the bottom-left corner on that particular li, but it's not showing up in IE6.
Unfortunately code is pre-release so I can't give you a link, so I've included the styles and markup I've used here:
Styles
Code:
#subtabs {margin:0;padding:0;list-style:none;clear:both;line-height:34px;width:697px;background:url(img/subnav-bg.gif) repeat-x top left;font-size:1.1em;-webkit-border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;behavior:url(/css/PIE.htc);position:relative;}
#subtabs li {margin:0;padding:0;display:inline;float:left;position:relative}
#subtabs li a {display:block;float:left;padding:0 14px 0 10px;text-align:center;background:url(img/subnav-off-part.gif) no-repeat top right;color:#fff;}
#subtabs li a.selected{margin-left:-1px;padding-left:11px;font-weight:bold;color:#fff;background:#855595 url(img/subnav-on-part.gif) no-repeat top right;border-bottom:solid 1px #451F52}
#subtabs li:first-child a.selected {margin:0;padding-right:15px;-webkit-border-radius:0 0 0 10px;-moz-border-radius:0 0 0 10px;border-radius:0 0 0 10px;behavior:url(/css/PIE.htc);position:relative;}
Markup:
Code:
<ul id="subtabs" >
<li><a href="*.jsp" class="selected">Link 1</a></li>
<li><a href="*.jsp">Link 2</a></li>
<li><a href="*.jsp">Register now</a></li>
<li><a href="*.jsp">Log in</a></li>
<li><a href="*.jsp">FAQs</a></li>
</ul>
Any help would be much appreciated.
T
Forums
I was convinced it did for some reason. Oh well, I think I'll take your suggestion Jason as opposed to including new libraries Spudley (thanks a million for the links though). I think given the nature of the project, it's just cleaner if I add the "first" class.