2

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');
    }
});
Ben Sewards
  • 2,571
  • 2
  • 25
  • 43

2 Answers2

3

Try adding

position: relative

to 

.roundCorners {}

Sounds funny, but had the same issue, may help.

EDIT:

Same may apply to:

.tabContent {}
Dennis Martinez
  • 6,344
  • 11
  • 50
  • 67
  • .roundCorners is added in the front-end to many elements that have .tabContent, which is position:absolute. Are you saying that position:absolute on my tab content won't work? – Ben Sewards Dec 07 '12 at 20:37
  • I've tried position absolute, haven't had much luck with it. I know position relative on the other hand has worked. Still no luck? – Dennis Martinez Dec 07 '12 at 20:39
  • still no luck, and I think I know why. cssPIE should work for any position other then static. I believe the reason is because my js is toggling the display of the content, causing the borders to not render. 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.. – Ben Sewards Dec 07 '12 at 20:42
2

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:

  1. removed roundedCorners from every tabContent divs, added to tabContent_wrapper
  2. added clearfix class to all the tabContent divs, defining clearfix class in the CSS code
  3. added PIE.htc to roundedCorners
  4. added some padding to roundedCorners because of the CSS3PIE corners...
  5. added position:relative; z-index:10; to roundedCorners
  6. commented out tabContent's position:absolute;
  7. hid tabContent_wrapper, because there's a 2px padding, which looks ugly when displaying no content in it
  8. 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>

Some screenshots:

  1. by default, no tabs opened: no tabs opened
  2. 1st tab opened: 1st tab opened
  3. 2nd tab opened: 2nd tab opened
  4. 3rd tab opened: 3rd tab opened

Of course, you'll have to manipulate the upper border not to show the border under the active tab.
Let me know if this helped.

Sk8erPeter
  • 6,899
  • 9
  • 48
  • 67
  • great detailed answer, this was my second option, but I may include some css changes. I went with positioning the tab content off the page so that when clicked, there is no re-rendering of tab content. I also may border the tab content wrapper instead as an alternative. Thank you for the help – Ben Sewards Dec 08 '12 at 21:44