strange white line

When I try the following script:

http://jsfiddle.net/mYx5y/23/

I get a strange开发者_开发知识库 white line in the background instead of it all being gray.

Why is this happening?

This happens in all browsers, not just IE8. Slightly misleading question.

You need to add overflow: hidden to #tabs to clear the floats - demo.

If you want the white gone, also add background: none - demo.

it's the padding of your #tabs div. Change the padding-top: 10px; to margin-top: 10px; and it's gone.

-edit-

You're right: That's because of the padding that's still set to 10px for all sides. Set the padding and margin of #tabs as follows:

padding:10px;
padding-top:0;
margin-top:20px;
padding-bottom:0px

The white line will disappear.

Try changing the padding for #tabs to 0...

#tabs { border:none; padding:0px; padding-top:0px; padding-bottom:0px;  }

It's coming from the jquery-ui.css file (line 62). Just override it with

.ui-widget-content { background:transparent; }
.portlet-content { background-color:#fff; }

Demo: http://jsfiddle.net/Marcel/NA9Xx/2/