Customizing Tabbed Panels

Question

I have found several posts to help with this but none seem to
work in both IE and Firefox (and I need it to work in both!).
Here is my edited CSS:
.TabbedPanels {
margin:0px auto;
padding: 0px;
clear: both;
width: 780px; /* IE Hack to force proper layout when
preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
position: relative;
top: 250px;
margin: 0px;
padding: 0px;
clear: both;
.TabbedPanelsTabPanelOne {
position: relative;
top: 1px;
float: left;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
height: 70px;
width: 260px;
background-image: url(../images/latestHeadlineNews.jpg);
background-repeat: no-repeat;
.TabbedPanelsTabPanelTwo {
position: relative;
top: 1px;
float: left;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
height: 70px;
width: 260px;
background-image:
url(../images/recentlyPublishedPhotos.jpg);
background-repeat: no-repeat;
.TabbedPanelsTabPanelThree {
position: relative;
top: 1px;
float: left;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
height: 70px;
width: 260px;
background-image: url(../images/downloadLatestPodcasts.jpg);
background-repeat: no-repeat;
.TabbedPanelsTabHover#TabbedPanelsTabPanelOne {
background-image: url(../images/latestHeadlineNewsOver.jpg);
background-repeat: no-repeat;
.TabbedPanelsTabHover#TabbedPanelsTabPanelTwo {
background-image:
url(../images/recentlyPublishedPhotosOver.jpg);
background-repeat: no-repeat;
.TabbedPanelsTabHover#TabbedPanelsTabPanelThree {
background-image:
url(../images/downloadLatestPodcastsOver.jpg);
background-repeat: no-repeat;
.TabbedPanelsTabSelected#TabbedPanelsTabPanelOne {
background-image: url(../images/latestHeadlineNewsOver.jpg);
background-repeat: no-repeat;
.TabbedPanelsTabSelected#TabbedPanelsTabPanelTwo {
background-image:
url(../images/recentlyPublishedPhotosOver.jpg);
background-repeat: no-repeat;
.TabbedPanelsTabSelected#TabbedPanelsTabPanelThree {
background-image:
url(../images/downloadLatestPodcastsOver.jpg);
background-repeat: no-repeat;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
height: 50px;
overflow: auto;
width: 780px;
margin: 0px;
padding: 0px;
.TabbedPanelsContent {
margin: 0px;
padding: 0px;
.TabbedPanelsContentVisible {
And here is the html:
<div id="tabbedPanels">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTabPanelOne"
id="TabbedPanelsTabPanelOne" tabindex="1"></li>
<li class="TabbedPanelsTabPanelTwo"
id="TabbedPanelsTabPanelTwo" tabindex="2"></li>
<li class="TabbedPanelsTabPanelThree"
id="TabbedPanelsTabPanelThree" tabindex="3"></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
</div>
Doing this makes the tabs disappear in IE and the content to
be pushed right in Firefox.
Any help!!!!!

Answer 1

Have I missed something?
What are you trying to achieve beside making the tabs
disappear in IE and pushing the content to the right in Firefox
On reading further, I gather that you want to have a unique
image (including images for hover and selected) for each tab. I
have tried using CSS but failed to get the required result. The
tabs do not have their own identity to latch onto.
At this stage I do not believe that it is possible..