internet explorer 8 - Jquery display problem in IE -


i have kind of "tab" solution built in jquery. when user clicks tab id of tab , shows right content tab based on id. works perfect in firefox, when tab clicked hides divs class "page" , show right page.

in ie8 works in same way strange thing happens, content of page shown on content of active page. if click tab1 shows cotent of page1 awesome-buttons page2 show up. when dragging mouse on awesome-button shouldn't there disappears, seems kind of "graphic/display" problem. doesn't happen time, works should.

have seen problem , there solution?

this code in jquery, html , css:

$(document).ready(function() {  $('.pages').hide();  $('.tab').click(function() {     var isactive = $(this).hasclass('tabactive');     var pages = $(this).closest('div').prev('div');     var tabs = $(this).closest('div');     $(".page").hide();     $(".page").css({ 'z-index:': '0' });     $(".tab").removeclass('tabactive')       //toggle open/close     if (isactive || pages.is(":hidden")) {         pages.animate({ width: "toggle" }, 200);     }      //show content     var id = this.id.substring(3, 4);     $('#page' + id).show();     $("#page" + id).css({ 'z-index:': '999'});      //mark tab active     if (!isactive) {         $(this).addclass('tabactive');     } }); }); 

html:

<div class="pages">     <div id="page1" class="page">         content 1         <a class='medium green awesome' href='test.html'>test</a>     </div>     <div id="page2" class="page">         content 1         <a class='medium green awesome' href='test.html'>test</a>     </div> </div> <div class="tabs">     <ul>         <li class="tab" id="tab1">tab1</li>         <li class="tab" id="tab2">tab2</li>     </ul> </div> 

css:

div .pages  {     width: 300px;     min-height: 350px;     background: #fff;     border: solid 1px #333;     position: relative;     float: left;       overflow: hidden;     padding: 20px; }  div .page {     width: 100%;     z-index: 0; }  div .tabs  {     float: left;     margin: 10px 0px 0px 0px; }  .tabs ul {     list-style: none;     padding: 0px;     margin: 0px; }  .tabs li {     padding: 0px;     margin: 0px 0px 10px 0px; }  .tab {     margin: 0px 0px 0px 0px; }  .tabactive {     color: red; }   //these buttons ones shows wrong: //got these from: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba  .awesome, .awesome:visited { background: #f9f9f9 url(/images/alert-overlay.png) repeat-x;  display: inline-block;  padding: 5px 10px 6px;  color: #fff;  text-decoration: none; -moz-border-radius: 5px;  -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); text-shadow: 0 -1px 1px rgba(100,100,100,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); position: relative; cursor: pointer; }  .medium.awesome, .medium.awesome:visited        { font-size: 11px; font-weight: bold; line-height: 1;  } .green.awesome, .green.awesome:visited      {     background: url(images/buttons/greenbuttonbg.png) repeat-x 0 0; } 

it know css looks like. try adding z-index:10 displayed div.


Comments

Popular posts from this blog

unicode - Are email addresses allowed to contain non-alphanumeric characters? -

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -