I’ve created a tab and tab content animation. When the tab is clicked, the

Question

0

Asked: June 15, 20262026-06-15T17:34:40+00:00 2026-06-15T17:34:40+00:00

I’ve created a tab and tab content animation. When the tab is clicked, the

0

I’ve created a tab and tab content animation. When the tab is clicked, the corresponding tab content is displayed underneath and the others are hidden, easy enough and works fine. The problem I’m having is with the rendering of the border-radius in IE7 and 8. I am using cssPIE.htc for any css that may be effected by these css3 properties. This is working for static content on the page that is not being manipulated with jQuery, but for dynamic content such as the tabs, I believe the css for content needs the -pie-watch-ancestors: n attribute. After doing so, still no results. Below is my code(CSS, HTML, and jQuery) and a screen shot of the difference between chrome and IE8. Any help would be great.

UPDATE: I may be able to fix this by having the tab content left, off the page, then placing the active one back to left: 0, so that it is always displayed and never re-rendered. **IN THE MEANTIME, here is the fiddle, go nuts: tab fiddle

Chrome Screenshot
chrome works

IE8 broken Screenshot
ie blows
As you may notice: no border, no background, and no background image(small colored boxes).

CSS affiliated with tab content

    .tabContent {
    position:absolute;
    display:none;
    background-color:White;
    background-image: url(/includes/images/home_phase2/colored_boxes_small.png);
    background-repeat: no-repeat;
    background-position: 98% 90%;
    border-left:1px solid #772981;
    border-right:1px solid #772981;
    border-bottom:1px solid #772981;
    width:945px;
    margin-top:1px;
    margin-left:-1px;
    z-index:9999;

    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    behavior: url("/includes/css/PIE.htc");
    -pie-watch-ancestors: true;
}

    .roundedCorners {
    border-radius:7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    behavior: url("/includes/css/PIE.htc");
}

jQuery(document.load expected)

$('.tabContent').click(function (event) {
    event.stopPropagation();
});

tabLnk.each(function () {
    $(this).attr("href", "javascript: void(0)")
});

tabLnk.click(function (event) {

    event.stopPropagation();
    var $this = $(this);
    var hideActive = $('.active').parent().index();

    if ($this.hasClass('active')) {
        $this.removeClass('active');
        $('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
    } else {
        $('.tabLnk').removeClass('active');
        $this.addClass('active');
        var showActive = $('.active').parent().index();
        $('.tabContent_wrapper').show();
        var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
        activeContent.show();
        activeContent.siblings().hide();
    }

    if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
        $('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
    }
});

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-15T17:34:41+00:00

OK, after long tries, I managed to do that. Finally I solved it with rounding the corners of tabContent_wrapper.

Here’s what I did as a short summary:

removed roundedCorners from every tabContent divs, added to tabContent_wrapper
added clearfix class to all the tabContent divs, defining clearfix class in the CSS code
added PIE.htc to roundedCorners
added some padding to roundedCorners because of the CSS3PIE corners…
added position:relative; z-index:10; to roundedCorners
commented out tabContent‘s position:absolute;
hid tabContent_wrapper, because there’s a 2px padding, which looks ugly when displaying no content in it
deleted the comment sign in front of $('.tabContent_wrapper').show();, it’s needed now; put in $('.tabContent_wrapper').hide(); when we click on the active tab again (not to let the ugly empty content show up with a border)

Here is the full code (post-formatted with http://jsbeautifier.org/):

<!DOCTYPE html>
<html>  
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>Tabs...</title>
    <style>
      .roundedCorners {
        padding:2px;
        border-radius:7px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        /* New stuffs */
        behavior: url(PIE.htc);
        position:relative;
        z-index:10;
      }
      .tabHome_wrapper {
        margin-bottom:-1px;
      }
      .tab_wrapper {
        position:relative;
        height:25px;
        margin-left:-1px;
      }
      .tab_wrapper ul li {
        display:inline-block;
        padding-right:20px;
        overflow:hidden;
        width:132px;
        height:25px;
      }
      .tab_wrapper ul > li:first-child a {
        -webkit-border-bottom-left-radius: 7px;
        -moz-border-radius-bottomleft: 7px;
        border-radius: 0 0 0 7px;
      }
      .tabLnk {
        position:absolute;
        background-image:url('http://i.imgur.com/PkR4W.png');
        background-position: -132px 1px;
        background-repeat:no-repeat;
        width:132px;
        height:25px;
        margin-top:1px;
        z-index:9999;
        font-size: 15px;
        text-align: center;
        line-height: 25px;
        color: White !important;
        text-decoration: none;
      }
      .borderTopLeftTabContent {
        border-radius: 7px 7px 7px 7px !important;
      }
      .tabLnk.active {
        width:130px;
        background-position:-1px 1px;
        -webkit-border-bottom-left-radius: 0px !important;
        -moz-border-radius-bottomleft: 0px !important;
        border-bottom-left-radius: 0px !important;
        color: #833889 !important;
      }
      .tabLnk:hover, .tabLnk:focus {
        text-decoration: none;
      }
      .tabLnk:visited {
        color: White;
      }
      .hideContent {
        left:-99999px;
      }
      .tabContent_wrapper {
        /* new stuffs */
        width:945px;
        margin-top:1px;
        margin-left:-1px;
        border:1px solid #772981;
        /*
        border-top:0px;
        */

        /* hide it first because of the 2 pixel roundedCorner padding */
        display:none;
      }

      .tabContent {
        /*
        position:absolute;
        */

        display:none;
        background-color:White;
        background-image: url('http://i.imgur.com/yyhGR.png');
        background-repeat: no-repeat;
        background-position: 98% 90%;

        /* moved to tabContent_wrapper, this z-index is not needed now */
        /* 
          border-left:1px solid #772981;
          border-right:1px solid #772981;
          border-bottom:1px solid #772981;
          width:945px;
          margin-top:1px;
          margin-left:-1px;
          z-index:9999;
        */

        -webkit-border-top-left-radius: 0;
        -moz-border-radius-topleft: 0;
        border-top-left-radius: 0;
      }

      .tabContent_img {
        float: left;
        width:290px;
        height:155px;
        padding: 20px 20px 10px 15px;
      }

      .tabContent_description {
        padding: 32px 140px 20px 0px;
        width:450px;
        float:right;
        font-size: 14px;
        color: gray;
      }

      .tabContent_description p:first-child {
        padding-bottom: 10px;
      }

      .lblTabTxt {
        color: white;
        padding-left: 3px;
        top: 5px;
        position: relative;
      }

      .lblTabTxt:hover {
        text-decoration: none;
      }

      /* Pete... clearfix from Drupal */
      /**
       * Markup free clearing.
       *
       * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
       */
      .clearfix:after {
        content:".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      /* IE6 */
      * html .clearfix {
        height: 1%;
      }
      /* IE7 */
      *:first-child + html .clearfix {
        min-height: 1%;
      }
    </style>

    <script type="text/javascript">
      $(document).ready(function () {

        var tabLnk = $('.tabLnk');

        $('.tabContent').click(function (event) {
          event.stopPropagation();
        });

        tabLnk.each(function () {
          $(this).attr("href", "javascript: void(0)")
        });

        tabLnk.click(function (event) {

          event.stopPropagation();
          var $this = $(this);
          var hideActive = $('.active').parent().index();

          if ($this.hasClass('active')) {
            $this.removeClass('active');
            $('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
            // hide tabContent_wrapper too (when empty, it would look ugly because of the 2px padding)
            $('.tabContent_wrapper').hide();
          } else {
            $('.tabLnk').removeClass('active');
            $this.addClass('active');
            var showActive = $('.active').parent().index();
            $('.tabContent_wrapper').show();
            var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
            activeContent.show();
            activeContent.siblings().hide();
          }

          if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
            $('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
          }
        });

      });
    </script>
  </head>

  <body>
    <div id="ctl00_cphBody_pnltabWrapper" class="tabHome_wrapper">
      <div id="tabArea" class="tab_wrapper">
        <ul>
          <li> <a class="tabLnk" href="javascript: void(0)">
                Administrators
                </a>

          </li>
          <li> <a class="tabLnk" href="javascript: void(0)">
                Teachers
                </a>
          </li>
          <li> <a class="tabLnk" href="javascript: void(0)">
                Technologists
                </a>
          </li>
        </ul>
      </div>
      <div id="tabContentArea" class="tabContent_wrapper roundedCorners">
        <div class="tabContent clearfix" style="display: none;">
          <div class="tabContent_img">
            <img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
            height="152">
          </div>
          <div class="tabContent_description">
            <p> <strong><span style="COLOR: #4b0082">Administrators</span> </strong></p>
            <p>a aliquet dolor gravida. Sed auctor imperdiet lacus vel vulputate.venenatis
              mauris, a dignissim elit fringilla ac. Quisque malesuada dapibus venenatis.
              Aliquam volutpat ante id diam auctor eu volutpat massa sem et augue. Vestibulum
              tortor lacus, venenatis sed ultricies ac, porta et ligula. Duis consectetur
              Mauris fringilla massa ac sem tristique consectetur. Aliquam varius, lacus
              vel sollicitudin congue, elit erat luctus mauris, Lorem ipsum dolor sit
              amet, consectetur adipiscing elit. Quisque posuere nunc lacinia diam ornare
              a ullamcorper nulla egestas.</p>
          </div>
        </div>
        <div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
          <div class="tabContent_img">
            <img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
            height="152">
          </div>
          <div class="tabContent_description">
            <p><strong><span style="COLOR: #4b0082">Teachers</span></strong></p>
            <p>CONTENT&nbsp;CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
              CONTENT CONTENT CONTENT CONTENT</p>
          </div>
        </div>
        <div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
          <div class="tabContent_img">
            <img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
            height="152">
          </div>
          <div class="tabContent_description">
            <p> <strong><span style="COLOR: #4b0082">Technologists </span></strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada,
              nulla eu viverra iaculis, nibh ipsum rhoncus risus, sit amet porta sapien
              elit id turpis. Donec eu nibh diam. Ut placerat vulputate ligula, ut mattis
              odio adipiscing id. Nullam vel arcu est. Praesent vitae porta metus. Cras
              auctor sem non nisi aliquet ultricies. Suspendisse potenti. Curabitur gravida
              eleifend aliquam. Fusce consequat cursus eros sit amet hendrerit. Curabitur
              quam nibh, auctor id dictum non, dapibus sit amet libero.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>