Like the title says, I need a Cross browser compatible CSS Tabbed interface, anyone know if such a thing exists?
Failing that, there are a ton of JS scripts available, anyone got one they’d recommend?
Cheers, Rich
Try something like this:
ul.section {
width:300px;
margin:0;
padding:0;
clear:both;
position:relative;
}
ul.section li {
float:left;
height:25px;
padding:0;
float:left;
margin:0 15px 0 0
}
ul.section a {
float:left;
height:25px;
line-height:25px;
padding:0 8px;
color:#019aff;
font-size:13px;
font-weight:bold;
overflow:hidden;
white-space:nowrap;
margin:-1px 0 0 0;
position:relative;
border:1px solid #2d6ab4;
}
ul.section a:visited {
color:#019aff;
}
ul.section a:hover, ul.section li.active a {
background:url(images/y-on.gif) no-repeat 100% 0;
color:#9be81c;
text-decoration:none;
outline:0;
border-bottom:1px solid #fff;
}
ul.section a.ontop:hover, ul.section li.active a.ontop {
border-bottom:1px solid #fff;
}
/* tab panel content */
.tabwrap {
width:400px;
clear:both;
}
.tab_container {
width:380px;
padding:10px;
border:1px solid #2d6ab4;
clear:both;
}
.tab-content {
width:100%;
clear:both;
}
You should be able to tweak that to fit.
Hi Paul,
I have now worked on your tabbed interface, which you can see in action at http://athenscollectibles.info/index.php?main_page=product_info&cPath=2&products_id=1 complete with small images before the text of each tab.
The full CSS code as amended by me is:
/****************************************************************/
/*** Original code published by Paul O'Brien (pmob.co.uk) at ***/
/*** http://www.sitepoint.com/forums/showthread.php?t=683218 ***/
/****************************************************************/
/*** Slightly modified by George Peroulakis for use at ***/
/*** http://athenscollectibles.info ***/
/****************************************************************/
ul {
margin:0;
padding:0;
list-style:none
}
ul.section {
width:500px;
margin:0;
padding:0;
clear:both;
position:relative;
}
ul.section li {
float:left;
height:25px;
padding:0;
float:left;
margin:0 5px 0 0
}
ul.section a {
float:left;
height:25px;
line-height:25px;
padding:0 8px;
color:#019aff;
font-size:13px;
font-weight:bold;
overflow:hidden;
white-space:nowrap;
margin:-1px 0 0 0;
position:relative;
border:1px solid #2d6ab4;
}
ul.section a:visited {
color:#019aff;
}
ul.section a:hover, ul.section li.active a {
[COLOR="Red"][B] background:url(images/y-on.gif) no-repeat 100% 0;[/B][/COLOR]
color:#0f6;
text-decoration:none;
outline:0;
border-bottom:1px solid #fff;
}
ul.section a.ontop:hover, ul.section li.active a.ontop {
border-bottom:1px solid #fff;
}
/* tab panel content */
.tabwrap {
width:400px;
clear:both;
}
.tab_container {
width:500px;
padding:10px;
border:1px solid #2d6ab4;
clear:both;
}
.tab-content {
width:100%;
clear:both;
}
.tab_content {font-size:11px;}
Line 46 of the above code makes reference to a background image, which I looked for in your site but couldn’t find. It’s obviously irrelevant to the functionality of the tabbed interface but I guess that it’s a nice addition.
Is it possible to attach this image to a reply to this post or give me its URL please? Alternatively, you might provide some information on its contents and dimensions just to let me experiment with it or create something similar.
Thank you again for all your assistance. Your site as well as this forum have vast information on CSS. I only wish that the day had more hours! 
Hi, this question is addressed to Paul:
Like Rich, who started this thread, I need a CSS tabbed interface for my site at http://athenscollectibles.info and have been searching for over a week. I found many, but none worked with my site platform (Zen Cart) or with all browsers…
…until I tried Paul’s example posted on 16 June. I have inserted it into a test product here http://athenscollectibles.info/index.php?main_page=product_info&cPath=1&products_id=1 and it does exactly what I want: it has the first tab contents displayed on load, changes smoothly and quickly the contents when other tabs are clicked and, most important, it is simple and I feel confident that I can customise it with my (non-expert) knowledge of CSS and HTML.
My only issue is that the tabs are one below the other rather than in a row. Ideally, I would prefer them to be in one row with the tab contents displaying below them like in this example from my other site http://www.athenscollectibles.com/supportedstores.html, which however does not work with Zen Cart.
I am very persistent and patient and tried hard to modify Paul’s example before applying for help here but I failed. As I said, I have some self-taught knowledge of CSS and HTML but this has proved to be beyond my abilities 
All I need is three tabs for “product description”, “additional information” and “more pictures” with their contents displayed on clicking the tab.
In an extra effort to probably find another solution, I visited your site and found a lot of valuable information which will help me in improving my site. Being there, I tried to use the pure CSS tab menus http://www.pmob.co.uk/temp/tabmenu_mine2.htm and [URL=“http://www.pmob.co.uk/temp/tabexample4.htm”]http://www.pmob.co.uk/temp/tabexample4.htm as they are both simple and neat. After playing around with the first of them, I changed the HTML to read:
<h1>Example Simple Tab Menu</h1>
<div id="outer">
<div id="tab"><a class="current" href="#">Product description</a> <a href="#">Other information</a>
<a href="#">More pictures</a></div>
<div id="content">
<p>Contents of "Product Description" tab </p>
</div>
</div>
What beats me is how do I define the contents for the second and third tab. The <div id=“content”> does not have an identification to link it to the first tab and, when I click the second or third tab nothing changes and the first tab remains selected.
These questions might seem stupid and it could all be that I’m missing something very simple and obvious.
Any help to unblock my (63 year old) mind will be really appreciated. As this is an old thread, it may not get attention. I’m leaving on holidays for a few days tomorrow and will start a new thread on my return if no reply has been posted. I hope that I will get an answer for which I thank you in advance.
With kind regards
George from Athens, Greece
Thank you Paul. :award: I cannot describe how happy I am as this seems to do exactly what I wanted to do. 
Off to some monitor-free days near the sea now and then back to full customisation.
Cheers 
and endless thanks again.
George
Thanks once more Paul. I already implemented the round corners thanks to your additional code and it now looks a lot better.
Have a nice evening and here’s my award! :award:
Hi,
Glad you managed to get it working:)
I’m afraid I don’t have the image as the code was something I knocked up for another question on the forum and the original OP was using images for the highlighted tab.
I believe it was just a tab with round corners on the top which you could make if you match the size to your tabs etc.
However it may be enough just add some border radius for good browsers instead and let IE have square corners (IE9 will be supporting border radius and hopefully look better than beta ie9 does ).
e.g.
ul.section a {
[B]-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;[/B]
}
Hi,
Sorry i don’t really have any special recommendations as I usually build them from scratch and then add some jquery if they need to be dynamic.
e.g.Simplest example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabs</title>
<style type="text/css">
ul {
margin:0;
padding:0;
list-style:none
}
ul.section {
width:50px;
margin:0 0 0;
padding:0 0 0px;
float:left;
clear:both;
position:relative;
}
ul.section li {
width:50px;
height:25px;
padding:0;
float:left;
clear:left;
}
ul.section a {
float:left;
clear:left;
width:40px;
height:25px;
line-height:25px;
padding:0 0 0 8px;
color:#019aff;
font-size:13px;
font-weight:bold;
overflow:hidden;
white-space:nowrap;
margin:-1px 0 0 0;
position:relative;
border:1px solid #2d6ab4;
border-left:none;
border-bottom:none;
}
ul.section a:visited {
color:#019aff;
}
ul.section a:hover, ul.section li.active a {
background:url(images/y-on.gif) no-repeat 100% 0;
color:#9be81c;
text-decoration:none;
border-right:1px solid #fff;
outline:0;
}
ul.section a.ontop:hover, ul.section li.active a.ontop {
border-right:1px solid #fff;
}
/* tab panel content */
.tabwrap {
width:215px;
border:1px solid #2d6ab4;
float:left;
}
.tab_container {
float: left;
width: 150px;
margin:0 0 0 9px;
display:inline;
}
ul.tab-content {
float:left;
width:150px;
margin:0;
padding:5px 0 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
</head>
<body>
<div class="tabwrap">
<ul class="section tabs">
<li><a class="ontop" href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
<li><a href="#tab4">Tab4</a></li>
<li><a href="#tab5">Tab5</a></li>
<li><a href="#tab6">Tab6</a></li>
<li><a href="#tab7">Tab7</a></li>
<li><a href="#tab8">Tab8</a></li>
<li><a href="#tab9">Tab9</a></li>
<li><a href="#tab10">Tab10</a></li>
</ul>
<div class="tab_container clearfix">
<div id="tab1" class="tab_content"> Test content here1 </div>
<!-- end tab1 -->
<div id="tab2" class="tab_content"> Test content here2 </div>
<!-- end tab2 -->
<div id="tab3" class="tab_content"> Test content here3 </div>
<!-- end tab3 -->
<div id="tab4" class="tab_content"> Test content here4 </div>
<!-- end tab4 -->
<div id="tab5" class="tab_content"> Test content here5 </div>
<!-- end tab5 -->
<div id="tab6" class="tab_content"> Test content here6 </div>
<!-- end tab6 -->
<div id="tab7" class="tab_content"> Test content here7 </div>
<!-- end tab7 -->
<div id="tab8" class="tab_content"> Test content here8 </div>
<!-- end tab8 -->
<div id="tab9" class="tab_content"> Test content here9 </div>
<!-- end tab9 -->
<div id="tab10" class="tab_content"> Test content here10 </div>
<!-- end tab10 -->
</div>
</div>
<!-- end tab-container -->
</body>
</html>
However as you say there are a ton of them [URL=“http://www.noupe.com/javascript/37-great-ajax-css-tab-based-interfaces.html”]out there and it’s a matter of finding one that suits your purpose.
[OFF TOPIC]
wow, I thought I’d google it one more time make sure I hadn’t missed anything and this thread is number one for the phrase “Cross browser compatible CSS Tabbed interface” which means they crawled and indexed it in less than 25 minutes, pretty impressive.
Brill, thanks guys. Eric I’ve bookmarked your page, thanks.