Vertical Tab Navigation (IE 7) - list item margin and containing UL

HTML & CSS
1

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:

http://fanqu.net/test.html

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">&nbsp;</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">&nbsp;</div>
         </div>

Any assistance is appreciated. Thanks!

2

Hi aek, Welcome to SitePoint! :slight_smile:
IE7 seems to work just fine when “haslayout” is set on the li.vTabOn

   ul.vTabNav [B]li.vTabOn[/B], ul.vTabNav li.vTabOnFirst {[B]zoom:1; [/B]border-top: 1px solid #9b9b9d; border-bottom: 1px solid #9b9b9d; border-left: 1px solid #9b9b9d; margin-right:-6px;position:relative;z-index:2;background: #fff url(img/caret-black-right.gif) no-repeat 5px 6px; padding-left: 12px; font-weight:bold; color: #000; }
3

Yup! Thanks!

Discovered it an hour after I posted. I just needed to google the right search terms. It’s a negative margin bug detailed here:

http://haslayout.net/css/Negative-Margin-Bug