• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2887
  • Last Modified:

Problem with JQuery UI - Tab panel position

I am trying different page variations with the JQuery UI library and I am running into some problems with columns, whether they are generated using CSS or tables.  The position of the tab panel (where the content for each tab is) seems to be relative to the bottom of the div or table in the same area.  Changing the positioning of the column and the tab panel has yielded no solution and I have also tried assigning a high z-index value with no luck.  Does anyone know how to get that tab panel to appear right under the tabs as it is suppose and not at the bottom of the column?

Thanks for you help.
#outerWrapper #contentWrapper #rightColumn1 {
	float: right;
	padding: 10px 0 0 0;
	clear: right;
	width: 260px;
	margin: -20px -9px 0 0px;
	position: relative;
	z-index: 99999;
}
 
.ui-tabs-panel {
	font-family: Verdana, Arial, sans-serif;
	clear:both;
	border-top: 1px solid #97a5b0;
	padding: 0px;
	font-size: 1.14em;
	line-height: 20px;
	position:relative;
	z-index: 25;
}

Open in new window

0
londonlife
Asked:
londonlife
  • 3
  • 3
1 Solution
 
Mark StegglesWeb DeveloperCommented:
Hello,

Can you post a link to the page?

Thanks
0
 
scrathcyboyCommented:
In tables --

<TABLE valign="top">
<TD valign="top">

in CSS --

DIV { text-align:top; vertical-align:top; }
TABLE { text-align:top; vertical-align:top; }
TD { text-align:top; vertical-align:top; }

0
 
londonlifeAuthor Commented:
I appreciate the comment scrathcyboy but it seems that did not resolve the issue.  It seems to be an issue with the tab panel position being relative to the bottom of the right column (which is a DIV).  I have tired different position properties but they all remove the DIV from being relative to the container its held in.

If anyone else missed it the link to the file is here:
http://joelmorrisondesigns.com/f55f/problem.html
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Mark StegglesWeb DeveloperCommented:
Sorry I missed the link earlier.

The tabs "Basic Info" "Details" "Get started"

Where do u want them to be?
0
 
londonlifeAuthor Commented:
The tabs themselves are fine where they are.  I would like the information they contain to wrap around the right column that I have instead of started at the bottom of it.
0
 
Mark StegglesWeb DeveloperCommented:
Hokay, FINALLY found a fix for this!

.ui-tabs-nav {
      float:left;
    list-style: none;
    margin: 0;
    padding: 0 0 0 2px;
      margin:0 0 0 0px;
}

.ui-tabs-panel {
      font-family: Verdana, Arial, sans-serif;
      clear:left;
      border-top: 1px solid #97a5b0;
      padding: 0px;
      font-size: 1.14em;
      line-height: 20px;
      position:relative;
      z-index: 25;
}



That should do it


Let me know!
0
 
londonlifeAuthor Commented:
Thanks for you help.  It didn't even cross my mind to float the dumb thing!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now