Question

I’m using the jquery tabs plugin and want to have the background a light grey color. In the css section for tabs, I found this line of code where I manually added the background-color part:

.ui-tabs .ui-tabs-panel { padding: 1em 1em; display: block; border-width: 0; background-color:#EEEEEE;}

The problem comes as seen in the picture below, where the grey background is only extending down part of the way. I initially thought I could update the div container with the same background color, but it didn’t work. It looks like that white portion below might be some kind of padding, so I looked for that in the css but everything I tried had the same effect.

Anyone got some ideas?

alt text http://www.redsandstech.com/ui_tab.jpg

This is what the HTML looks like (Theoretically):

<div id="tabs_here">
   <ul>
      <li><a href="#" onclick="$('#T_1').html('Display the data');" >Item Groups</a>
      </li>
   </ul>
   <div id="T_1"></div>
</div>

Answer 1

This seems simple, but sometimes it’s the simple solutions you miss… check if #T_1 or#tabs_here have a specific height specified, or add overflow:hidden to them to check, it looks like your content is extending past them.