SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code:
       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:

    Code:
             <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. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi aek, Welcome to SitePoint!
    IE7 seems to work just fine when "haslayout" is set on the li.vTabOn

    Code:
       ul.vTabNav li.vTabOn, ul.vTabNav li.vTabOnFirst {zoom:1; 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. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi aek, Welcome to SitePoint!
    IE7 seems to work just fine when "haslayout" is set on the li.vTabOn

    Code:
       ul.vTabNav li.vTabOn, ul.vTabNav li.vTabOnFirst {zoom:1; 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; }
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •