Table display block in IE

HTML & CSS
1

Hi,

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">
	<tr>
		<td>
			<p class="title">Sample Page</p>
			<p class="subtitle">Sample sub-heading</p>
		</td>
	</tr>
	</thead>
</table>



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

#header
{
	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?

2

#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.

3

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