2

Please,

I'm trying to include a tab using CSS in my Visual Web Part without success. Tested in Opera, Chrome and Firefox and both work but not in IE. Tested in versions 8, 9 and 11.

Can anyone tell me what could be wrong?

#content { padding: 25px; background: #FFF; }

#tabs {
    border: 1px solid #DEDEDE;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 205px;
    position: relative;
    overflow: hidden;
}
.tabs-content {
    padding: 25px;
    height: 120px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
}
.tabs {
    overflow: hidden; 
    background: #e1e1e1; 
    background: -moz-linear-gradient(center top , #f2f2f2, #e1e1e1); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e1e1e1)); 
    -moz-border-radius: 4px 4px 0 0; 
    -webkit-border-radius: 4px 4px 0 0; 
    border-radius: 4px 4px 0 0; 
    -webkit-box-shadow: 0 1px 0 #FFF inset; 
    -moz-box-shadow: 0 1px 0 #FFF inset; 
    box-shadow: 0 1px 0 #FFF inset;
}
.tabs a {
    display: block; 
    float: left; 
    font: 15px/35px Arial, Helvetica, Sans-serif; 
    padding: 0 20px 0 40px; 
    color: #999; 
    text-shadow: 0 1px 0 #FFF;
    border-left: solid 1px rgba(0,0,0,0.05);
    border-right: solid 1px rgba(255,255,255,0.7);
    position: relative;
    overflow: hidden;
}
.tabs a:first-child {
    border-left-width: 0;
}
.tabs a:last-child {
    border-right-width: 0;
}
.tabs a:after {
    content: '✔';
    position: absolute;
    top: 0;
    left: 10px;
    line-height: 21px;
    font-size: 10px;
    width: 21px; 
    text-align: center; 
    margin: 7px 10px 5px 0; 
    background: #000; 
    font-size: 12px; 
    -moz-border-radius: 21px; 
    -webkit-border-radius: 21px; 
    border-radius: 21px; 
    background: #bdbdbd; 
    background: -moz-linear-gradient(center top , #d4d4d4, #bdbdbd); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#bdbdbd)); 
    -webkit-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset; 
    -moz-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset; 
    box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset; 
    text-shadow: 0 1px 0 #999; 
    color: #ffffff;
}
.tabs a:hover {
    background: #FFF;
    border-left-color: #CCC;
}
.tabs a:hover:after {
    background: #038bd5; 
    background: -moz-linear-gradient(center top , #2dc3fc, #038bd5); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2dc3fc), color-stop(100%,#038bd5)); 
    text-shadow: 0 1px 0 #096c9e; 
    -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85); 
    -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85); 
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85)
}
.tabs a:hover + .tabs-content {
    display: block;
}
.tabs-content:hover {
    display: block;
}

<div id="tabs">
<nav class="tabs">
    <a href="#">About Scamper</a>
    <section class="tabs-content">
        Scamper is the coolest.
    </section>
    <a href="#">His Anatomy</a>
    <section class="tabs-content">
        Partly because he's a penguin.
    </section>
    <a href="#">Life Achievements</a>
    <section class="tabs-content">
        But also he had a movie made about him.
    </section>
    <a href="#">More Info</a>
    <section class="tabs-content">
        These tabs sure are great.
    </section>
</nav>

1

If you are unable to get tabs to function with pure CSS, you may be better off generating the tab behavior with some JavaScript.

Here is a basic example that should work across all browsers:

<style>
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tab { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee;}
div.tab.hide { display: none; }
</style>
<ul id="tabs">
    <li><a href="#about">About Scamper</a></li>
    <li><a href="#anatomy">His Anatomy</a></li>
    <li><a href="#achievement">Life Achievement</a></li>
    <li><a href="#more">More Info</a></li>
</ul>
<div class="tab" id="about">
    Scamper is the coolest.
</div>
<div class="tab" id="anatomy">
    Partly because he's a penguin.
</div>
<div class="tab" id="achievement">
    But also he had a movie made about him.
</div>
<div class="tab" id="more">
    These tabs sure are great.
</div>
<script>
    var tabLinks = new Array();
    var contentDivs = new Array();
    var tabListItems = document.getElementById('tabs').childNodes;
    for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
            var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
            var id = getHash( tabLink.getAttribute('href') );
            tabLinks[id] = tabLink;
            contentDivs[id] = document.getElementById( id );
        }
    }
    /* Assign onclick events to the tab links and highlight the selected tab */
    var i = 0;
    var hash = window.location.hash.length > 0 ? getHash(window.location.hash) : "";
    for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if(hash != ""){
            if(hash == id){tabLinks[id].className = 'selected';}
        }
        else if ( i == 0 ){tabLinks[id].className = 'selected';}
        i++;
    }
    var i = 0;
    /* Hide all unselected content divs */
    for ( var id in contentDivs ) {
        if ( tabLinks[id].className != 'selected' ){ contentDivs[id].className = 'tab hide'}
        i++;
    }

function showTab() {
      var selectedId = getHash( this.getAttribute('href') );
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tab';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tab hide';
        }
          }
}
function getFirstChildWithTagName( element, tagName ) {
    for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
    }
}
function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
}
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.