Table layout, works in Firefox but not Internet Explorer. Help?

Martine · October 31st, 2005, 6:08 PM

I'm making a website for someone, and the website looks perfectly fine in FireFox but it has a bunch of weird gaps when I open it in IE. My code looks fine to me, is there anything I'm missing? What can I do so it looks the same in both browsers? I've validated both the HTML documents and the CSS documents and they're fine.

The site in question is http://onlean.com/testing/test.html so you can take a look and see what I mean.

The CSS is:

Code:

body {font-family:verdana;
      color:#000000;
      font-size:10pt;
      background-color:#ffffff}


A:link {color:#DD0808;
        text-decoration:none;
        font-weight:normal}

A:visited {color:#DD0808;
           text-decoration:none;
           font-weight:normal}

A:hover {color:#BB0A0A;
         text-decoration:none;
         font-weight:normal}




table {background-color:transparent;
       font-family:verdana;
       border-width:0px;
       color:#000000;
       font-size:10pt;
       border-width:0px;
       border-collapse:collapse}



td {background-color:transparent;
    border-width:0px;
    border-collapse:collapse;
    padding:0px}



td.menu {background-color:transparent;
    border-width:0px;
    border-collapse:collapse;
    padding:0px;
    height:50px;
    width:175px;
    padding:0px}

td.black {background-color:#000000;
    border-collapse:collapse;
    border-width:0px;
    padding:0px;
    width:175px;
    padding:0px}

td.footer {background-color:#000000;
    border-collapse:collapse;
    border-width:0px;
    padding:0px;
    height:50px;
    width:750px;
    color:#ffffff;
    font-size:6pt}



td.content {background:#ffffff;
    border-collapse:collapse;
    border-width:0px;
    width:400px;}

The HTML is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>On Lean Productions</title>

<script type="text/javascript">

function SwapImage ()

boogienites = new Image();
boogienites.src = "images/rollover_01.gif";

docrok = new Image();
docrok.src = "images/rollover_02.gif";

pics = new Image();
pics.src = "images/rollover_03.gif";

messageboard = new Image();
messageboard.src = "images/rollover_04.gif";

audio = new Image();
audio.src = "images/rollover_05.gif";

events = new Image();
events.src = "images/rollover_06.gif";

links = new Image();
links.src = "images/rollover_07.gif";

contact = new Image();
contact.src = "images/rollover_08.gif";

</script>

</head>

<body background="images/concrete.gif">

<center>

<table border="0" cellspacing="0" cellpadding="0">

     <TR>
          <TD COLSPAN=3><a href="test.html"><IMG SRC="images/onleanheader.gif" WIDTH=750 HEIGHT=200 ALT="" 

border="0"></a></TD>
     </TR>

     <TR>
          <TD class="menu" width="175" height="50" valign="top"><a href="boogienites.html" 

onmouseover="boogienites.src='images/rollover_01.gif';" onmouseout="boogienites.src='images/menu_01.gif';"><img 

src="images/menu_01.gif" name="boogienites" border="0" alt=""></a></TD>    
          <TD ROWSPAN=5 valign="top" class="content"><b>Welcome to On Lean Productions Online.</b><br><br>Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample 

text.  Sample text.  Sample text.  Sample text.  Sample text.  Sample text.
          <TD class="menu" width="175" height="50" valign="top"><a href="audio.html" 

onmouseover="audio.src='images/rollover_05.gif';" onmouseout="audio.src='images/menu_05.gif';"><img 

src="images/menu_05.gif" name="audio" border="0" alt=""></a></TD>
     </TR>

     <TR>
          <TD class="menu" width="175" height="50" valign="top"><a href="docrok.html" 

onmouseover="docrok.src='images/rollover_02.gif';" onmouseout="docrok.src='images/menu_02.gif';" 

target="_blank"><img src="images/menu_02.gif" name="docrok" border="0" alt=""></a></TD>
          <TD class="menu" width="175" height="50" valign="top"><a href="events.html" 

onmouseover="events.src='images/rollover_06.gif';" onmouseout="events.src='images/menu_06.gif';"><img 

src="images/menu_06.gif" name="events" border="0" alt=""></a></TD>
     </TR>

     <TR>
          <TD class="menu" width="175" height="50" valign="top"><a href="pics.html" 

onmouseover="pics.src='images/rollover_03.gif';" onmouseout="pics.src='images/menu_03.gif';"><img 

src="images/menu_03.gif" name="pics" border="0" alt=""></a></TD>
          <TD class="menu" width="175" height="50" valign="top"><a href="links.html" 

onmouseover="links.src='images/rollover_07.gif';" onmouseout="links.src='images/menu_07.gif';"><img 

src="images/menu_07.gif" name="links" border="0" alt=""></a></TD>
     </TR>

     <TR>
          <TD class="menu" width="175" height="50" valign="top"><a href="/board" 

onmouseover="messageboard.src='images/rollover_04.gif';" onmouseout="messageboard.src='images/menu_04.gif';"><img 

src="images/menu_04.gif" name="messageboard" border="0" alt=""></a></TD>
          <TD class="menu" width="175" height="50" valign="top"><a href="contact.html" 

onmouseover="contact.src='images/rollover_08.gif';" onmouseout="contact.src='images/menu_08.gif';"><img 

src="images/menu_08.gif" name="contact" border="0" alt=""></a></TD>
     </TR>

     <TR>
          <td class="black" width="175" height="*" valign="top"> </TD>
          <td class="black" width="175" height="*" valign="top"> </TD>
     </TR>

     <TR>
          <td COLSPAN=3 class="footer" width="750"><center>All content © On Lean Productions, 2005.  Site design by 

<a href="mailto:martine.richards@umbc.edu">Martine Richards</a>.</center>
     </TR>

</table>

</center>

</body>
</html>

Any suggestions, please?

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)