Hey all,

I'm trying to replace my tables with DIV and use CSS positioning but I've run into a problem

Here is my DIV code -
Code:
<div class='main'>
	<img src='images/header.jpg' width='100%' />
	<div class='whitebox'>
		<b>a</b>
	</div>
</div>
CSS
Code:
div.main
{
	color: black;
	width: 750px;
	height: 450px;
	text-align: center;
	vertical-align: top;
	top: 5%;
	z-index: 1;
}

div.whitebox
{
	background-color: white;
	color: black;
	border-right: 1px black solid;
	border-left: 1px black solid;
	border-bottom: 1px black solid;
	height: 338px;
	width: 733px;
	text-align: center;
	vertical-align: top;
	top: 0px;
	z-index: 2;
}
My problem is there is a small gap between the two DIVs that I want to make go away I tried setting the whitebox top: -1px; but it didn't work.

Thanks for the help