jquery ui-tabs widget , changing the color of the background with css causes problem with display

Posted by Ronedog on Stack Overflow See other posts from Stack Overflow or by Ronedog
Published on 2010-04-07T20:30:11Z Indexed on 2010/04/07 20:33 UTC
Read the original article Hit count: 436

Filed under:
|
|

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

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>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui