Table display block in IE


I’m doing a theme markup for a friend and I have to do this in tables. For the header area I have the following.

<table id="wrapper">
	<thead id="header">
			<p class="title">Sample Page</p>
			<p class="subtitle">Sample sub-heading</p>

	padding: 2.5em 0em;
	background: url(images/background_gradient.gif) repeat-x top left; 
	display: block;

	margin: 0 auto;
	border: 1px solid #eec7b2;
	width: 45em;
	background: url(images/containerbg.png) repeat;
	display: block;

#header tr, #header td
	display: block;

#header td
	padding: 3.5em 1em;
	background: url(images/headerbg.png) no-repeat right center;

In all other browsers except IE (including IE8 & IE9 Preview), the table is behaving as intended - like a block, but in IE it’s shrink to fit content i.e. like the table it is. I tried giving it hasLayout through all possible properties and it still didn’t work. Any suggestions?

#wrapper would have to take up all of the width (hence want it to behave like auto on a block element) because it has background_gradient.gif which I need to overlay over the background on body.

I’m trying to minimize useless table declarations as well, I’m only having problems with IE though.

You could move the width style from #header to #wrapper.