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
Post a Comment