Forums

Starscream

Hey ya'll. First time post on this awsum site.

I having sum problems with CSS/xHTML/thinking...
On this site im working on, I use the ol' classic UL menu. It looks like this:

HTML

<div class="menu-wrap">
	 <ul>
	 	 <li><a href="#">Menu 1</a></li>
	 	 <li><a href="#">Menu 2</a></li>
	 	 <li><a href="#">Menu 3</a></li>
	 </ul>
</div>

CSS

.menu-wrap ul li {
	 list-style:none;
	 float:left;
}

.menu-wrap ul li a {
	 border-right:thin #fff solid;
}

And it looks like shit with the border-right on the last menu item. It kind of looks incomplete, like its missing a link on the end. I want to remove the border-right on the last menu item.

This can be easily done with a class applied to it. But the thing is it will be used dynamically within a CMS site. So i wont be able to class the links.

I have tried the :last-child and :first-child but the compatibility is not what i want because the client may be using IE6 or such shitty-devils-work browsers.

Is there another solution? (Btw. Im from sweden, so my english may not be as evolved as yours :P)

Thanks.

seeingsound

I have used

<--[if lt IE 9]>
<script>
jQuery(function ($) { 
	$(".menu-wrap a:last-child").css("border","none"); 
});
</script>
<![endif]-->

Of course jQuery has to be loaded before.

treehouse : what would you like to learn today?

Forums

Menu styling with last-child of first child?

HTML

CSS