First off, I had IE8 set for something else and it kicked your site into the bad. I just reset IE8 and your site looks the same as FF. Now, to your problems.
You are using depreciated tags and attributes and they render differently in different browsers. Use this site to keep your coding up to par:
http://validator.w3.org/
Both tables use align="center" that's depreciated. I used inline styling to correct it. Also depreciated is <td
width="390" bgcolor="000000"><br /> and the bgcolor is why it does not show up in FF. I changed those.
The
extra width in the second table. This is because of your css file:
Code:
ul li { float:left; text-align:center; padding-top: 5px; margin-right:3px; position:relative; background:#003e65; }
What were interested in is this -> margin-right:3px; Thats the space you see in the menu compared to the bottom table. Couple of ways to get rid of this. I shrunk the 360px <td>'s and in order to maintain centering, fudged the 10px <td>'s. If your going to use those for displaying anything we have to restart our engines on this. But the code I used to put things under each other with the apparent width is this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="dropdown.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table width="800" border="0" cellpadding="0" cellspacing="0" style="text-align: center;margin:0 auto;">
<tr>
<td style="width: 10px;"> </td>
<td colspan="2">
<ul>
<li><a href="#">The Show</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Segments</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Press</a></li>
</ul>
</li>
<li><a href="#">The Panel</a>
<ul>
<li><a href="#">Host</a></li>
<li><a href="#">Premier League</a></li>
<li><a href="#">Championship</a></li>
<li><a href="#">European</a></li>
</ul>
</li>
<li><a href="#">Subscribe</a>
<ul>
<li><a href="#">I-Tunes</a></li>
<li><a href="#">RSS Feed</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>
<li><a href="#">Archives</a>
<ul>
<li><a href="#">Current Season</a></li>
<li><a href="#">Summer 2011</a></li>
<li><a href="#">Club Review Shows</a></li>
<li><a href="#">2010-2011 Season</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Supporter Clubs</a></li>
<li><a href="#">Footy Links</a></li>
</ul>
</li>
</ul>
<!--<div style="background-color:red;w3px;height:25px;float:right;"> </div>-->
</td>
<td style="width: 10px;"> </td>
</tr>
</table>
<table width="800px" border="0" cellpadding="0" cellspacing="0" style="text-align: center;margin:0 auto;">
<tr>
<td style="width: 10px;"> </td>
<td style="background-color: #000000; width: 389px;"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</td>
<td style="background-color: #000000; width: 388px;">
</td>
<td style="width: 13px;"> </td>
</tr>
</table>
</body>
</html>
I don't think I changed the css file. But check how things look and LMK.
Before you post, read our: 
