IE is screwing up my tables ><

[b]fixed[/b]
I decided to use a CSS solution.

I made a tables design in Mozilla, and all was good, and then I tested it in IE and all hell exploded. (This would not be the first time IE killed something I made.)

Below is my tables code, and then a link to a screenshot of what IE does to it. Notice how my round corners are not appearing where they’re supposed to?

[code]<table width=”100%” height=”100%” cellspacing=”0″ bgcolor=”#005826″>

<!– FIRST LAYER –>
<tr>
<td rowspan=”5″ width=”15″ bgcolor=”#005826″><!– green ext –></td>
<td width=”15″ bgcolor=”#005826″><!– green –></td>
<td colspan=”5″ height=”25″>
<!– PUT TOP-LEVEL TABS HERE –>
</td>
<td width=”15″ bgcolor=”#005826″><!– green –></td>
<td rowspan=”5″ width=”15″ bgcolor=”#005826″><!– green down to footer –></td>
</tr>

<!– SECOND LAYER –>
<tr>
<td width=”15″ height=”25″ bgcolor=”#F6E791″ class=”corner”>
<img src=”imgs/corner_1a.gif” alt=”” />
</td>
<td width=”15″ bgcolor=”#F6E791″><!– yellow –></td>
<td colspan=”3″ bgcolor=”#F6E791″ height=”25″>
<!– PUT 2ND-LEVEL TABS HERE –>
</td>
<td width=”15″ bgcolor=”#F6E791″><!– yellow –></td>
<td width=”15″ height=”25″ class=”corner” bgcolor=”#F6E791″ align=”right”>
<img src=”imgs/corner_1b.gif” alt=”” />
</td>
</tr>

<!– 3RD LAYER –>
<tr>
<td rowspan=”3″ width=”15″ bgcolor=”#F6E791″><!– yellow ext –></td>
<td width=”15″ height=”25″ class=”corner” bgcolor=”#CFCFCF”>
<img src=”imgs/corner_2a.gif” alt=”” />
</td>
<td width=”15″ bgcolor=”#CFCFCF”><!– gray –></td>
<td bgcolor=”#CFCFCF” height=”25″>
<!– PUT 3RD-LEVEL TABS HERE –>
</td>
<td width=”15″ bgcolor=”#CFCFCF”><!– gray –></td>
<td width=”15″ height=”25″ class=”corner” bgcolor=”#CFCFCF” align=”right”>
<img src=”imgs/corner_2b.gif” alt=”” />
</td>
<td rowspan=”3″ width=”15″ bgcolor=”#F6E791″><!– yellow ext –></td>
</tr>

<!– TOP OF CONTENT AREA –>
<tr>
<td rowspan=”2″ width=”15″ bgcolor=”#CFCFCF”><!– gray ext –></td>
<td width=”15″ height=”15″ class=”corner” bgcolor=”#FFFFFF”>
<img src=”imgs/corner_3a.gif” alt=”” />
</td>
<td bgcolor=”#FFFFFF” height=”15″><!– white –></td>
<td width=”15″ height=”15″ class=”corner” bgcolor=”#FFFFFF” align=”right” class=”right”>
<img src=”imgs/corner_3b.gif” alt=”” />
</td>
<td rowspan=”2″ width=”15″ bgcolor=”#CFCFCF”><!– gray ext –></td>
</tr>

<tr>
<td bgcolor=”#FFFFFF” colspan=”3″ valign=”top” id=”content”>
<h1>Header 1</h1> … etc
</td>
</tr>

<!– BEGIN FOOTER HTML –>
<tr>
<td colspan=”9″ height=”12″ bgcolor=”#F5F5F5″>
</td>
</tr>
<tr>
<td colspan=”9″ height=”22″ id=”footer”>
…footer stuff
</td>
</tr>
</table>[/code]

[url=http://img.photobucket.com/albums/v172/lamei/iesucks.gif]screenshot[/url]

Also in #HTML _↴