tab header height enlarged inside liquid css layout Firefox 3.6.8

tab header height enlarged inside liquid css layout Firefox 3.6.8

I am developing a website that has three columns in a liquid layout.

I've used jQuery tabs on other pages with great success, so I know how to set them up.

This is the first time I've tried them in a liquid CSS layout.

Here is the CSS for the three columns:

#left_side {
  float: left;
}
#right_side {
  float: right;
}

#left_side, #right_side {
  margin-top: 10px;
  width: 25%;
}
#content {
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left:27%;
  margin-right:27%;
}

The tab set markup is placed in the content div (center).

Here is a picture of how a simple tab set renders within the content div.

As you can see, the header overlay image is not adjusting itself to be enclosed in the tab header area.

Any suggestions on how to fix?  I'm using 1.4.2 with jquery-ui-1.8.2.custom.css from themeroller, but I've also tried with pre-rolled themes, such as sunny and lightness with similar results.  I'm sure it is some sort of CSS conflict, but not sure how to resolve.

thanks for any helpful advice.



Note: The tabs render ok in IE 8.  The above rendering is from Firefox 3.6.8

I love Firefox, so I'd love to have a solution for this.

thanks,
Bob