Help with table design, IE and netscape display different results

[PipSqueak]

I need help with some 'boxes'(tables) I'm trying to design. The red box at my website, http://www.SetAFocus.com, comes out really weird on netscape but perfect on IE.

The weirdest thing is that it is exactly the same as my orange and blue boxes (which turned out perfectly in both browsers)! The only thing I changed was the colour codes! :(

I tried numerous times copying and pasting the codes of the orange or blue boxes, and only changed the colours in it, but in vain.

I've prepared the screenshots:

IE example:
http://www.setafocus.com/ie.jpg

Netscape example:
http://www.setafocus.com/netscape.jpg

My CSS codes:


<!-- Say hello to orange -->
A.orange:link { color: #A7871D }

A.orange:active { color: black }

A.orange:visited { color: #A7871D }

A.orange:hover { color: black }

table.orange
{
background-color: #FFFF97;
border-style: solid;
border-color: #CC972D;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
width: 160;
font-size: 11;
color: #A7871D;
line-height: 15px;
}

table.orangemid
{
background-color: #FFFF97;
border-style: solid;
border-color: #CC972D;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
width: 95%;
font-size: 11;
color: #A7871D;
line-height: 15px;
}

table.orange2
{
background-color: #FFFF97;
border-style: solid;
border-color: #CC972D;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
width: 100%;
font-size: 11;
color: #A7871D;
}


td.orangetop
{
background-color: #FFCC2F;
border-style: solid;
border-color: #CC972D;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
font-weight: bold;
font-size: 12;
}

<!-- Say bye to orange -->

<!-- Say hello to red -->
table.red
{
background-color: #FFCCCC;
border-style: solid;
border-color: #FF6666;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
width: 160;
font-size: 11;
color: #330000;
line-height: 15px;
}

td.redtop
{
background-color: #CC3333;
border-style: solid;
border-color: #FF6666;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
font-weight: bold;
font-size: 12;
}
<!-- Say bye to red -->
[/code]



My HTML codes for red

[code]
<!-- ONE BIG RED TABLE -->
<img src="common/redtop.gif"><br>
<table class="red" cellpadding="5" cellspacing="0">
<tr>
<td class="redtop">Sponsored links</td>
</tr>
<tr>
<td><center>blah blah blah</center></td>
</tr>
</table><img src="common/redbtm.gif"><br>
<P>

<!-- ONE BIG ORANGE TABLE -->
<img src="common/orangetop.gif"><br>
<table class="orange" cellpadding="5" cellspacing="0">
<tr>
<td class="orangetop">Features</td>
</tr>
<tr>
<td>blahblahblah


</td>
</tr>

</table><img src="common/orangebtm.gif"><br>
<P>



Thanks for anyone who has the time to help me out!

[DaveSW]

Are there supposed to be two of these threads? if not I'll remove one before I investigate your code!

[toicontien]

I've found with Netscape that a problem seemingly stemming from CSS is actually a markup problem. Netscape is very unpredictable if you leave unclosed elements in your document.

1. Make sure your HTML validates as HTML 4.01 Transitional (use a proper doctype, character set). You can validate the page at validator.w3.org.

2. Validate your CSS at the above web address.

Netscape has MUCH better support for web standards than IE (especially for CSS).

[Fang]

Change this section:
<!-- ONE BIG RED TABLE -->
<img src="common/redtop.gif"><br>
<table cellpadding="5" cellspacing="0">
<tr>
<td class="redtop">Sponsored links</td>
</tr>
<tr>
<td style="background-color: #FFCCCC; border-style: solid;border-color: #FF6666;border-top-width: 0px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 0px;"><center><script type="text/javascript"><!--
google_ad_client = "pub-5673525215069612";
google_ad_width = 148;
google_ad_height = 600;
google_ad_format = "148x600_as";

This should resolve the problem, but a rewrite of the page without tables, using valid html and css is the real solution.