Hi all,
I’m having some trouble in IE 7 with this veritcal tab navigation component that I am trying to write.
The issue I’m having is basically getting an LI element to push itself out of it’s containing UI parent. The code I have works fine in IE 6, 8, Firefox, and Safari. IE 7 - not so much.
Here is a link to the problem:
The relevant CSS:
div.vTabNavContain { float:left; zoom:1; width: 220px; }
ul.vTabNav { list-style-type:none; width:220px; padding:0; margin:0; }
ul.vTabNav li { padding: 5px; background-color: #eee; border-bottom: 1px dotted #bdbdbd; cursor:pointer; }
ul.vTabNav li.unselectedHover { background-color: #fff; }
ul.vTabNav li.vTabFirst { border-top: 2px solid #ccc; }
ul.vTabNav li.vTabPrevSibling { border-bottom:none; }
ul.vTabNav li.vTabOn, ul.vTabNav li.vTabOnFirst { border-top: 1px solid #9b9b9d; border-bottom: 1px solid #9b9b9d; border-left: 1px solid #9b9b9d; margin-right:-6px;position:relative;z-index:2;background: #ffffff url(img/caret-black-right.gif) no-repeat 5px 6px; padding-left: 12px; font-weight:bold; color: #000; }
ul.vTabNav li.vTabOn a.vNavLink, ul.vTabNav li.vTabOnFirst a.vNavLink { color: #000; }
ul.vTabNav li a.vNavLink { text-decoration:none; }
div.vTabNavContentContain { float:left;width:574px;margin-left:5px;border:1px solid #9b9b9d;position:relative;z-index:1; }
.c60contentSelected { zoom:1; }
And the HTML:
<div class="c60contentSelected" id="c60tab1content">
<div class="vTabNavContain">
<ul id="txtBankingVTabs" class="vTabNav">
<li id="txtTab_1" class="vTabFirst vTabPrevSibling"><a class="vNavLink" href="javascript:void(0)">Nav Item 1</a></li>
<li id="txtTab_2" class="vTabOn"><a class="vNavLink" href="javascript:void(0)">Nav Item 2</a></li>
<li id="txtTab_3"><a class="vNavLink" href="javascript:void(0)">Nav Item 3</a></li>
<li id="txtTab_4"><a class="vNavLink" href="javascript:void(0)">Nav Item 4</a></li>
</ul>
</div>
<div class="vTabNavContentContain">
<div class="vTabNavContent" id="txtTab1Content">
content here
<div class="clearAll"> </div>
</div>
<div class="vTabNavContent" id="txtTab2Content" style="display:none;">
content 2
</div>
<div class="vTabNavContent" id="txtTab3Content" style="display:none;">
content 3
</div>
<div class="vTabNavContent" id="txtTab4Content" style="display:none;">
content 4
</div>
</div>
<div class="clearAll"> </div>
</div>
Any assistance is appreciated. Thanks!