Problem displaying a table in IE 8

http://www.submissionfc.com/comparison if you could take a look at this page in IE 8 the table seems to lose shape completely.

I have run the same table on other sites using different templates and have shown no problems .

What do I need to do to stop this table from expanding in IE 8.

I am just stumped . I think it has to do with the style sheet.

 

1) get rid of all the presentational crap that doesn't belong in the markup. that means no width, no border, no bordercolor - it means lose all those spans, strong tags, and invalid nesting... You are aware that <P> being block level cannot go inside STRONG or SPAN since they are inline-level, right? NOT that ANY of that text should need strong tags (since TH kind-of does that as a HEADING), inlined spans for color, or paragraph tags since they aren't paragraphs! Two thirds of your markup for that table should have been left on the cutting room floor.

Pretty much I would assume that all those invalid nestings of block level tags inside inline-level ones are the root of your problems, especially with no good reason to be USING either of them.

Really ALL you should need for HTML there is this:

<table class="compare">
	<caption>
		SUBMISSION GI'S Vs. COMPETITOR'S GI'S COMPARISON:
	</caption>
	<thead>
		<tr>
			<th>Gi Characteristics</th>
			<th>SubmissionFC<br />Pearl Weave Gi</th>
			<th>Atama<br />Single Weave Gi</th>
			<th>Koral<br />Light Gi</th>
		</tr>
	</thead><tbody>
		<tr>
			<th>Constructed from a<br />single piece of fabric</th>
			<td>Yes</td>
			<td><strong>No</strong></td>
			<td>Yes</td>
		</tr><tr>
			<th>Rubber inside<br />of lapel</th>
			<td>Yes</td>
			<td>Yes</td>
			<td>Yes</td>
		</tr><tr>
			<th>Pre-shrunk</th>
			<td>Yes</td>
			<td><strong>No</strong></td>
			<td>Yes</td>
		</tr><tr>
			<th>Tapered body<br />and sleeves</th>
			<td>Yes</td>
			<td>Yes</td>
			<td>Yes</td>
		</tr><tr>
			<th>Standard colors<br />(white, blue)</th>
			<td>Yes</td>
			<td>Yes</td>
			<td>Yes</td>
		</tr><tr>
			<th>100% Cotton</th>
			<td>Yes</td>
			<td>Yes</td>
			<td>Yes</td>
		</tr><tr>
			<th>Price</th>
			<td><span>Only $75</td>
			<td>$140 - 166 at <br />Atama Website</td>
			<td>$151-163 at <br />Koral USA Website</td>
		</tr>
	</tfoot>
</table>

Code (markup):

With this for CSS:

.compare {
	border-collapse:collapse;
	width:600px;
}

.compare caption {
	text-indent:24px;
	text-align:left;
	text-transform:uppercase;
	/* px fonts due to image interaction! */
	font:bold 24px/24px arial,helvetica,sans-serif; 
	background:url(/templates/mine/images/PostHeaderIcon.png) top left;
}

.compare th,
.compare td {
	text-align:center;
	vertical-align:middle;
	padding:0.5em;
	border:1px solid #666;
}

.compare th {
	color:#FFF;
	background:#A01;
}

.compare td {
	text-align:left;
	color:#000;
	background:#FFF;
}

.compare td strong {
	color:#F00;
}

.compare td span {
	color:#396;
}

Code (markup):

End of problem.

Basically, you've got a whole slew of completely unnecessary (and non-semantic) markup inside your TD and TH - any bit of which could be the root of your problems... But again, this is why presentation has no business being in your markup in the first place - ALIGN, CENTER, STYLE, BORDER - developers still using them always begs the question "What is this, 1997?"

Though I will say it was refreshing to see someone actually USING TH, THEAD and TBODY... Too bad you were using a H2 for caption and had all that extra bloat.

 

i know I added too much extra stuff but most of it was out of frustration trying to make it line up .