Hello,
 
After reading DWWS (Zeldman) and fiddling around with some DOM script, I've got a series of tabs which when clicked reveal a menu underneath, using toggling of the CSS display element. (display: none; and display: ; is toggled).
 
I used Z-index 1 for the tab, and Z-index 2 for the content, so that the content will be above the tab and the content background will overlap the bottom of the tab for that "extending effect".
 
You can use Mozilla/Firefox/Opera to see what I mean at http://www.ikonik.net/2/. It works in Internet Explorer but the tabs 'flicker'. Is this a problem with the Z-index in IE or have I done something else wrong with my CSS? link: http://www.ikonik.net/2/css/visual.css.
 
Any help would be appreciated, thanks in advance.
 

Snippets:
CSS:
 
 #features .sidecontent {
 background: url(../img/iko/sdmid.gif) repeat-y bottom center;
 z-index: 2;
 position: relative;
 margin-top: -15px;
 padding: 5px 10px 10px;
}
      
#features h2 {
 z-index: 1;
 margin-top: 5;
 margin-left: 0;
 margin-bottom: 0px;
 width: 195px;
 background-color: #FFF;
 color: #666;
 position: relative;
 
XHTML:
 
  <div id="features">
    <h2><a href="" title="Categories (View/Hide)"><img src="" alt="Categories" /></a></h2>
    <div id="categories" class="sidecontent" style="display:none;">
      <ul>
        <li>Tech and Web</li>
        <li>Art and Design</li>
        <li>Thoughts and Life</li>
      </ul>
    </div>
</div>
 

Thanks again, it's probably something real silly but I can't work it out. I only have a flicker problem in IE.
 
Jay S Hills

Reply via email to