Forums
View unanswered posts | View active topics It is currently Mon Nov 24, 2014 11:54 am



Reply to topic  [ 4 posts ] 
 LI inside a UL 
Author Message

Joined: Fri Oct 15, 2010 4:42 am
Posts: 9
Post LI inside a UL
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


Wed Dec 01, 2010 9:27 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: LI inside a UL
IE6 doesn't support the :first-child selector. You'll need to implement that some other way, such as adding class="first" to the first li and using that in your selector.


Wed Dec 01, 2010 10:50 am
Profile

Joined: Mon Jul 19, 2010 4:46 am
Posts: 34
Post Re: LI inside a UL
IE6 doesn't support first-child, but you might be able to make it work by using (another) compatibility library such as IE7.js or Selectivzr.

http://code.google.com/p/ie7-js/
http://selectivizr.com/

Note: I'm not using either of these for my current project as I don't have to support IE6, so I can't comment on how well the work or whether they combine well with CSS3Pie.


Thu Dec 02, 2010 4:48 am
Profile

Joined: Fri Oct 15, 2010 4:42 am
Posts: 9
Post Re: LI inside a UL
Thanks guys. Of course IE6 doesn't support first-child!!! :( 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.

Cheers,

T


Mon Dec 13, 2010 4:40 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: Bing [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.