SitePoint Sponsor

User Tag List

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

    Question Tab panel giving extra margin in IE

    Hi,

    I was wondering if somebody could help me figure out a bizzare problem with my tab panel code that is driving me up the wall.

    I'm trying to create a tab panel using CSS that enables users to switch content based on the tab they click. However, there is a very annoying bug when I view the tab panel under IE 6 and 7; Firefox seems to display it perfectly.

    The problem I'm getting is that there is a gap between the tab bar (the area where the tabs appear) and the content area below when viewed under IE.

    The following is a sample page with only a heading and my tab panel creation present:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Tab Panel Test</title>
    
    <style type="text/css">
    
    .tabpanel_button {
    	padding: 4px 10px;
    	background-color: #dedede;
    	border: 1px solid black;
    	border-left-width: 0px;
    	float: left;
    	display: block;
    	margin-bottom: -1px;
    }
    
    #tab0.tabpanel_button {
    	border-left-width: 1px;
    }
    
    .tabpanel_selected {
    	padding-bottom: 5px;
    	border-bottom-width: 0px;
    	background-color: #ffffff;
    }
    
    .tabpanel_panel {
    	border: 1px solid black;
    	clear: both;
    }
    
    .tabpanel_content {
    	margin: 15px;
    	background-color: #ffffff;
    }
    
    </style>
    
    </head>
    <body>
    
    <h2 style="padding: 8px 0px 4px; border-bottom: 1px solid #A5A397; margin-bottom: 10px">Heading Here</h2>
    
    <div id="tabpanel1">
        <a id="tab0" class="tabpanel_button tabpanel_selected">General</a>
        <a id="tab1" class="tabpanel_button">Access Control</a>
        <div class="tabpanel_panel">
            <div class="tabpanel_content" id="panel0">
    			This is content for the first tab.
            </div>
            <div style="visibility: hidden; display: none" class="tabpanel_content" id="panel1">
            	This is content for the second tab.
            </div>
        </div>
    </div>
    
    </body>
    </html>
    This problem ONLY exists when the heading <h2></h2> line is present; if I remove the heading line, then it displays properly.

    This bug baffles me as, to me, it seems like the heading line is completely unrelated from the tab panel and should not affect the display of the elements inside the tab panel.

    I would greatly appreciate any help or suggestions regarding this problem I'm having as I've been pulling my hair out over this the last few days.

    Thanks in advance.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see the problem. It is because you have a margin applied to the h2. I would remove it and find another way of creating that gap.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    That seems to have fixed it.

    Do you think there is a way to fix it within the tab panel? I'm creating this tab panel as a generic component that I can basically "stick anywhere" without worrying about what's around it.


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
  •