Stupid Formatting Error In IE

Visual bug in internet explorer

[PhoenixReborn]

Hi there. I have a header row across the top of my page, which is divided up into two columns. When viewed in Firefox, both columns are equal height and aligned to each other properly. When viewed in IE, however, the column on the right has a background color bar above it, forcing it down 2 px. This causes a background color bar to form between the header row and the body of the page. Any ideas, anyone?

Thanks in advance...

[MatthewHSE]

First, Welcome to Webmaster World!

To answer your question, it would help a lot to have short code snippet of the relevant portion of the page. That way we can see better what's going on and give more useful help. Don't post the whole page; just the problem areas.

[PhoenixReborn]

Here is the code of the two sections that make up the header.

<td width="570" height="137" valign="top">
<OBJECT id=0286
codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0
height=137 width=570 align=top
classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="_cx" VALUE="12065"><PARAM NAME="_cy" VALUE="2921"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="flash/0286INTRO.swf"><PARAM NAME="Src" VALUE="flash/0286INTRO.swf"><PARAM NAME="WMode" VALUE="Window"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE="FFFFFF"><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1">
<EMBED src="flash/0286INTRO.swf" quality=high bgcolor=#FFFFFF WIDTH="570" HEIGHT="137" NAME="0286" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED></OBJECT>
</td>

<td width="200" height="137" valign="top">
<table WIDTH="200" height="137" BORDER="0" CELLPADDING="0" CELLSPACING="0" valign="top">
<tr width="200">
<tr>
<td colspan="4">
<IMG src="images/top_bar.jpg">
</td>
<tr>
<td><IMG height=22 alt ="" src="images/block.jpg" width=72 border=0>
</td>
<td><A href="index.html"><IMG height=22 alt ="" src="images/a1.gif" width=44 border=0 ></A>
</td>
<td><IMG height=22 alt ="" src="images/a2.gif" width=39 align=top >
</td>
<td><A href="aboutus.html"><IMG height=22 alt ="" src="images/a3.gif" width=45 align=top border=0 ></A></td></tr>
<tr width="200">
<td COLSPAN="4"><IMG alt="" src ="images/mem.gif" width=200 ></td></tr>
<tr width="200">

<td COLSPAN="4">

<table valign="top" border="0" cellpadding="0" cellspacing="0" background="images/bgaccnt.gif" height="80" width="200">
<tr>
<td align="right" class="tah9"><font style="FONT-SIZE: 8pt" color="#666666" face="arial">LOGIN</font></td>
<td><IMG src="images/spacer.gif" width=5></td>
<td width="100"><input name="text1" id="text1" size="12" maxlength="12" ></td></tr>
<tr>
<td align="right" class="tah9"><font style="FONT-SIZE: 8pt" color="#666666" face="arial">PASSWORD</font></td>

<td><IMG src="images/spacer.gif" width=5></td>
<td width="100">
<input name="text2" id="text2" size="12" maxlength="12" ><A href="JavaScript: ttopen()"><IMG height=20 src="images/go.gif" width=20 border=0></A></td></tr>
</table>
</td></tr>
</table>
</td>

[sgina]

You might want to try this and please let me know if this works, cuz this happens to me sometimes.

Wherever you have this...

<td width="200" height="137" valign="top">
<table WIDTH="200" height="137" BORDER="0" CELLPADDING="0" CELLSPACING="0" valign="top">

and

</td>
</table>

Delete the space between <td> and <table> and space between the closing tag </td> and </table>

Should look like this:
<td width="200" height="137" valign="top"><table WIDTH="200" height="137" BORDER="0" CELLPADDING="0" CELLSPACING="0" valign="top">

and

</td></table>