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: 494
        
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?

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