Tab navigation like on guardian site

[PixelPusher]

Ok here ya go. Take a look at that and let me know if you have any questions.

 

[dsydius]

PP,

That's awesome! I didn't expect it to be as simple as you have made it look.

Can't thank you enough......I have learned so much in just that one task than I have in the last few months.

Thanks again PP.....you are a star.

DS

 

[smoovo]

Perfect! Even though I'm using sprites it was out of my mind...

 

[PixelPusher]

PP,

That's awesome! I didn't expect it to be as simple as you have made it look.

Can't thank you enough......I have learned so much in just that one task than I have in the last few months.

Thanks again PP.....you are a star.

DS

Perfect! Even though I'm using sprites it was out of my mind...

Thanks guys, glad to help out.

 

[PixelPusher]

Just wanted to make one comment on the css info I gave you.
There is a class named :

ul.menu li:last-child a

This class uses a css psuedo class. Psuedo classes are very helpful. They allow the developer to target certain elements on the page markup without actually having to create a specific class name.

Problem is...and there is always one right

IE doesn't understand many psuedo classes. (IE must have been ditching class when all other browsers where being good students, haha....ok dumb joke)


Whats the solution?

Just make a specific class (e.g. last-item) and add the class name to the last list item in the menu. So it would look like this:

ul.menu li.last-item a, ul.menu li.top-category a, ul.menu li.sub-category a {
	border:none;
}

<ul class="menu">
	<li class="top-category"><a href="intermediate_menu_pg1.html">news</a></li>
    <li class="first-item"><a href="intermediate_menu_pg2.html">UK</a></li>
    <li><a href="#">world</a></li>
    <li><a href="#">development</a></li>
    ...
    <li class="last-item"><a href="#">law</a></li>
</ul>

 

[PixelPusher]

For your reference, here is a css compatibility list for all versions of IE.

CSS Compatibility and Internet Explorer

 

[bcee]

For your reference, here is a css compatibility list for all versions of IE.

CSS we blatantly ignore and Internet Explorer

Fixed the link.