What you are looking at:
This is the footer area of a page I am working on. Above to the left is the navigation pane in a lighter grey, and to the right is the main content area.
As you can see in the image below, my divs somehow show this white/black area beneath my footer/ main content area / and navigation. This ONLY SHOWS in Internet Explorer!. How can I get rid of it?
Here's my code:
<html>
<head>
<style>
font.small {font-size:14px; text-align:right; float:right; line-height: 110%;}
font.grey {font-size:14px; text-align:right; float:right; color:#C0C0C0; line-height: 110%;}
font.mid {font-size:16px; text-align:right; float:right; line-height: 110%;}
font.large {font-size:20px; text-align:right; float:right; line-height: 110%; font-weight:bold;}
font.normal {font-size:14px; text-align:right; float:right; line-height: 125%;}
lineheight {line-height: 120%;}
hr.thick {color: #000066;background-color: #000066;height: 3px;}
hr.thin {color: #000066;background-color: #000066;height: 1px;}
</style>
</head>
<body>
<div id="container" style="width:581px;">
<div id="header" style="background-color:#C8C8C8; width:581px; height:75px;">
<h1 style="margin-bottom:0;"></h1>
<tbody>
<tr>
<div style="float:left;">
<td><img src="my image" width="275" height="63" /></td>
</div>
<div style="float:right;">
<td><img src="my image" alt="" width="275" height="63" /></td>
</div>
</tr>
</tbody>
</table>
</div>
<div id="menu" style="background-color:#E8E8E8;height:890px;width:225px;float:left;margin-right:6px;" >
<hr class="thick">
<font class="large">Title</font><br>
<font class="mid">Textr</font><br>
<font class="small">Web: <a href="link">web site</a><br>
Address. <br>
Here </font><br>
<font class="grey">800-239-2389 <br>
401-274-9009 <br>
Email:<a href="mailto:here">email</a></font><br>
<br clear="all"/>
<hr class="thin">
<font class="small"><b>Text</b></font><br>
Text<br>
Text
<p>Text</p>
<font class="small"><b>Text:</b></font><br>
<font class="normal">IText<br>
Text<br>
Text<br></font>
<br clear="all"/>
<p>
<font class="small"><b>Text</b></font><br>
<font class="normal">Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br></font>
</p>
</div>
<div id="content" style="background-color:#FFFFFF;height:890px;width:350px;float:left;" >
<Main Content>
<p style=font-size:11px;>Text <br>
Text</p>
</lineheight>
</div>
<div id="footer" style="background-color:#C8C8C8;clear:both;text-align:center; width:581px; ">
<table border="0">
<tbody>
<tr>
<td style="padding-left: 65px; padding-right: 0px;"><b>Member CFTC:</b></td>
<td style="padding-left: 105px; padding-right: 0px;"><b>Member NFA:</b></td>
</tr>
<tr>
<div style="float:left;">
<td style="padding-left: 65px; "><a href="my image link"><img style="vertical-align: center;" src="my image url" width="125" height="125" /></td>
</div>
<div style="float:right;">
<td style="padding-left: 90px; "><a href="my image link" target="_blank"><img style="vertical-align: center;" src="my image ur" alt="" width="214" height="59" /></td>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>
This post was edited by Lizar50 on Sep 11 2013 02:47pm