Problem with CSS Tabs

[Shylmysten]

Hi!

I'm having a bit of a problem with a CSS tab menu and for the life of me I can't figure out what is causing the problem. If anyone could lend me some advice or point me in the right direction I'd sure appreciate it!

In the lower left hand corner of the page in the link below I have created a CSS Tab:

http://soundcheckenterprises.com/event_professionals/

However, everytime I click on the service tab or the clients tab, all the text shifts up and the "top border" graphic around the tab dissappears. You can click on the link above and see it for yourself. Just click on the "Client" or the "Service" tabs and suddenly the border image dissappears and all the text shifts up.

Below is the CSS I have used to create the tabs with:

#container2 { 
 overflow: hidden;
 height:35em;
 } 
 
a.active {
  display:block;
  background:url(./images/sidebar_tab_on.gif) no-repeat top left;
  width: 113px;
  height: 15px;
  text-align:center;  
  padding: 4px 0;
  float:left;
  color:#414347;
  text-decoration:none;
  font-weight:bold;
  margin: 5px 0 0 -2px;}

a.inactive {
  display:block;
  background:url(./images/sidebar_tab_off.gif) no-repeat top left;
  width: 105px;
  height: 15px;
  text-align:center;  
  padding: 4px 0;
  color:#FFF;
  float:left;
  text-decoration:none;
  font-weight:bold;
  margin: 5px 0 0 -2px;}

p.activated {
  display:block;
  background:url(./images/sidebar_tab_on.gif) no-repeat top left;
  width: 113px;
  height: 15px;
  text-align:center;  
  padding: 4px 0;
  float:left;
  color:#414347;
  text-decoration:none;
  font-weight:bold;
  margin: 5px 0 0 -2px;}

p.inactivated {
  display:block;
  background:url(./images/sidebar_tab_off.gif) no-repeat top left;
  width: 105px;
  height: 15px;
  text-align:center;  
  padding: 4px 0;
  color:#FFF;
  float:left;
  text-decoration:none;
  font-weight:bold;
  margin: 5px 0 0 -2px;}


 
.sidebar_tabs {
  background:url(./images/sidebar_bg.gif) repeat-y top left;
  width: 256px;
  font-size:1.2em;
  color:#555;
  clear:both;
  margin: 0 0 0 -2px;

 }

.sidebar_tabs p {
  padding: 0 10px 0 15px;
  line-height:1em;}

.sidebar_tabs ul {
list-style:square;
}
  
.sidebar_tabs ul li {
  padding: 0 2em 0 2em;
  list-style:square;}

.sidebar_tabs p.title {
 font-weight:bold;
 color:#286786;
 background:url(./images/icon_news.gif) no-repeat top right;
 padding-bottom: 40px;
 margin-right: 10px;}

.sidebar_tabs .sidebar_tabs_wrapper {
 background:url(./images/sidebar_top.gif) no-repeat top left;
 padding:2.5em;
 margin: 0 auto 0;
 height:35em;}
 
 
.sidebar_tabs .sidebar_bottom {
 background:url(./images/sidebar_bottom.gif) no-repeat bottom left;
 padding-top: 12px;
 width: 256px;}
 
.sidebar_tabs .sidebar_tabs_wrapper a:link {color:#555;}
.sidebar_tabs .sidebar_tabs_wrapper a:hover {color:#000;}

And Here is the HTML used to create the tab:

 <a href="#c1" class="active">Clients</a>
			  <a href="#c2" class="inactive">Services</a> 
            
		     <div class="sidebar_tabs">		
<div id="container2"> 
			<div class="sidebar_tabs_wrapper">
<a name="c1" id="c1"></a>
		      <h1><strong>Some of Sound Check's Clients Have Included:</strong></h1>
        
              <ul >
                <li><strong>Tracy Lawrence</strong> <br/>
                   </li>
                <li><strong>Styx</strong> <br/>
                   </li>
                <li><strong>ELO</strong> <br/>
                   </li>
                <li><strong>Eddie Money</strong> <br/>
                   </li>
                <li><strong>The Nitty Gritty Dirt Band</strong> <br/>
                   </li>
                <li><strong>The Little River Band</strong> <br/>
                   </li>
                <li><strong>Faith Hill</strong> <br/>
                   </li>
                <li><strong>Manhattan Transfer</strong> <br/>
                   </li>
                <li><strong>Dixie Chicks</strong> <br/>
                   </li>
                <li><strong>George Clinton and the P-Funk All   Stars</strong> <br/>
                   </li>
                <li><strong>John Michael Talbot</strong> <br/>
                   </li>
                <li><strong>The Canadian Brass</strong> </li>
              </ul>
              <p>...just to name a few...</p>
			</div>
<div class="sidebar_tabs_wrapper">
<a name="c2" id="c2"></a>
		     <p>this is a test</p>

</div><!--/sidebar_tabs_wrapper-->
		</div><!--/tabs container2-->
        </div><!--/sidebar tabs-->	
	  
		</div><!--/sidebar-->

Looking forward to finding a resolution as I've spent 6 hours today trying all kinds of things to fix this error.

Thanks in advance!!!

 

[jnjc]

I don't think there is a quick fix for this issue.

Where did you get the code for the tabs ? There seems to be an inbuilt flaw with it.

What is happening is:

You have two divs inside a wrapper (#container2), one for each tab. One div is sitting on top of the other and the wrapper has the overflow set to hidden.

The graphic for the top right corner is contained inside each of the two tab divs.

When you click a tab what ever script you are using seems to be switching which tab div sits on top. Hence the lower one is hidden because overflow is hidden.

What appears to be happening is that when you click whatever is re-arranging the order of the tab divs is causing them to stack on top of each other in such a way that the content no-longer fits in the visible space and the top of the div containing the graphic is being pushed up and out of view (again by the overflow hidden setting).

To demonstrate this try setting the overflow to auto like this:

screen.css - line 186

#container2 {
height:200px;
[B]overflow:auto;[/B]
}

You will see a scrollbar appear when you click a tab and up the top you will see you right corner graphic.

Where did you get code for the tab ? Are you sure it works ? If it does work then try rolling back any changes you made to it (css or HTML) until it looks right again...

HTH,
JC

 

[Shylmysten]

Hi,

Thanks for trying. I actually created this code from a mix and match of other tab codes, however, I'm not using any scripting whatsoever. What you see is what you get, the code is 100% pure CSS/html.

How it knows what tab to load is simple, I have given the tabs and boxes a name designation and ID, also, the container and the boxes have the same height 35em, therefore it is only possible for one of them to show up at a time, the overflow hides anything over and beyond 35em no matter which box is selected so when you click on a tab:

Tab directing the click to box named C2:

<a href="#c2" class="inactive">Services</a>

<div class="sidebar_tabs_wrapper">
<a name="c2" id="c2"></a>
<p>this is a test</p>
</div>


Does this explaination help any?

Thanks!