i have an ie problem for some reason my tabbed menu shows the opposite way in ie than it should it should have tabs on the top right and tabs on the left side of the container but only in ie the tabs appear on the right hand side i cant seem to figure it out
here is my html lists , some script and the css applied to them
<ul>
<li class="dealer tabbed"><a>Manufacturer Dealer</a></li>
<li class="lender tabbed"><a>Lender<br /> </a></li>
<li class="developer tabbed"><a>Developer<br /> </a></li>
</ul>
<ul class="side">
<li class="overview tab"><a>Overview</a></li>
<li class="tour tab"><a>Take the tour</a></li>
<li class="websites tab"><a>Example websites</a></li>
<li class="faq tab"><a>FAQ</a></li>
<li class="support tab"><a>Support</a></li>
</ul>
<div id="mainContainer">
<div class="div1 hide">
overview
</div>
<div class="div2 hide">
take the tour</div>
<div class="div3 hide">
example websites</div>
<div class="div4 hide">
faq</div>
<div class="div5 hide">
support</div>
repeated for each sidetab
$(".overview").click(function () {
$(".hide").hide();
$(".div1").show();
$(".tab").addClass("inactive");
$(".overview").removeClass("inactive");
$(".overview").addClass("active");
repeated for each top tab
$(".dealer").click(function () {
$(".hide").hide();
$(".div1").show();
$(".tabbed").addClass("inactive");
$(".dealer").removeClass("inactive");
$(".dealer").addClass("active");
CSS:
#container {
position:relative;
}
#mainContainer {
left:130px;
position:absolute;
top:73px;
}
.div1, .div2, .div3, .div4, .div5, .welcome {
position:relative;
bottom:100px;
top:0px;
}
.topnav ul li a {
float:left;
}