Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #226

Why is there a large gap between my Tabs and their related content panels in Firefox or Opera?

The Answer

Prepared Nov. 2007 by Al Sparber, PVII

Note: The Tab Panel Magic 1 system has been retired.
The newer Tab Panel Magic 2 system does not have this issue.

This can happen when your Tab Panel Magic 1 is adjacent to a floated element in certain kinds of layouts. Since the Tabs themselves are each floated and subsequently cleared, the clearing element is also clearing the adjacent float - causing the gap.

There are 2 ways to fix this issue. Choose method 1 or 2:

1. Float your Tab Panel left

Add this rule to your Tab Panel CSS file:

.p7TPpanel {float: left;}

2. Set overfow hidden on your Tab Panel root

Add this rule to your Tab Panel CSS file:

.p7TPpanel {overflow: hidden;}

Note: For IE6, in some situations, you might need to add a width value of 100%

Back to the questions list