For my friends who are not technology folks the title looks like something crazy, for those friends who are geeks, and even more so for those who use Joomla, the title makes perfect sense. So you are in or you are out, either way, it took me quite some time to resolve using images with Joomlaworks’ Tabs and Slides plugin, particularly with regards to IE7 problems. Asa result, I share my solution with the world. Here is teh entire CSS for the plugin (Joomla 1.5) Just upload images for your tabs. Each onehas a right side which is long to cover any potential width of the tab, and the left is just a small floater to make the shape of the left side.
###############################################################
/*
// JoomlaWorks “Tabs & Slides” Plugin for Joomla! 1.5.x – Version 2.4
// License: http://www.gnu.org/copyleft/gpl.html
// Copyright (c) 2006 – 2008 JoomlaWorks, a Komrade LLC company.
// More info at http://www.joomlaworks.gr
// Developers: Fotis Evangelou
// ***Last update: May 20th, 2008***
*/
/* — Generic — */
a:active,a:focus {outline:0;}
.jwts_clr {clear:both;height:0;line-height:0;}
/*###################START TABS################################*/
.jwts_tabberlive {
margin:1px 0px;
/*padding:0px;*/
}
.jwts_tabberlive .jwts_tabbertab {
margin:0px;
padding:6px;
border:1px solid #bbb;
border-top:0px;
width:600px;
}
.jwts_tabberlive .jwts_tabbertab h2,
.jwts_tabberlive .jwts_tabbertab h3,
.jwts_tabberlive .jwts_tabbertabhide {display:none;}
ul.jwts_tabbernav {
margin:0px;
padding:3px 4px;
list-style:none;
list-style-image:none;
background:none;
border-bottom:1px solid #bbb;
}
ul.jwts_tabbernav li {
padding:3px 0px;
list-style:none;
list-style-image: none;
background: url(tab_right_off.jpg) right top no-repeat;
vertical-align:top;
display:inline;
}
ul.jwts_tabbernav li a,
/*TAB NOT ACTIVE*/
ul.jwts_tabbernav li a:link {
font-size:12px;
font-weight:bold;
padding:3px 4px;
color:#333;
border-bottom:none;
vertical-align:top;
background: url(tab_left_off.jpg) left top no-repeat;
}
ul.jwts_tabbernav li a:visited {color:#333;}
/*TAB HOVER*/
ul.jwts_tabbernav li a:hover {
color:#c64934;
text-decoration:none;
}
ul.jwts_tabbernav li a:active,ul.jwts_tabbernav li a:focus {
outline:0;
}
/*TAB ACTIVE*/
ul.jwts_tabbernav li.jwts_tabberactive a {
background: url(tab_left_on.jpg) left top no-repeat;
border-bottom:1px solid #fff;
padding:3px 4px;
}
ul.jwts_tabbernav li.jwts_tabberactive a:hover {
background: url(tab_left_on.jpg) left top no-repeat;
border-bottom:1px solid #fff;
padding:3px 4px;
text-decoration:none;
}
ul.jwts_tabbernav li.jwts_tabberactive,
ul.jwts_tabbernav li.jwts_tabberinactive {
background: url(tab_right_on.jpg) right top no-repeat;
}
.jwts_tabberlive .jwts_tabbertab,ul.jwts_tabbernav {text-align:left;} /* force content orientation */
/* Additional IE specific bug fixes… */
* html ul.jwts_tabbernav li { /* auto clear, @ IE 6 & IE 7 */
padding:0px 0px;
list-style:none;
list-style-image: none;
background: url(tab_right_off.jpg) right top no-repeat;
vertical-align:top;
display:inline;
}
/*###########END TABS##########################################*/
/* — Slides — */
.jwts_slider {margin:4px 0px;padding:0px;}
.jwts_slidewrapper {border:none;width:100%;visibility:hidden;height:0px;overflow:hidden;position:relative;margin:0;padding:0;}
/* DEFAULT STYLING */
.jwts_title {margin:0 0 1px 0;padding:0px;overflow:hidden;background:url(slide_bg_r.png) no-repeat right;cursor:pointer;}
.jwts_title_left {background:url(slide_bg_l.png) no-repeat left;margin:0 10px 0 0;}
a.jwts_title_text,
a.jwts_title_text:link {display:block;background:url(star.png) no-repeat;background-position:0px 2px;padding:0 2px 0 20px;margin:0 0 0 8px;line-height:22px;font-size:12px;font-weight:bold;text-decoration:none;color:#444;}
a.jwts_title_text:visited {color:#444;}
a.jwts_title_text:hover {display:block;background:transparent url(star.png) no-repeat;background-position:0px 2px;padding:0 2px 0 20px;margin:0 0 0 8px;line-height:22px;font-size:12px;font-weight:bold;text-decoration:none;color:#c64934;}
.jwts_slidecontent {padding:4px 12px 8px 12px;margin:0px;position:relative;background:none;border:none;}
.jwts_title_left,.jwts_slidecontent {text-align:left;} /* force content orientation */
###############################################################