IE Image Problems

[Hartley]

Source: http://www.sedition-gaming.com

There are a couple of problems on the page in IE that I don't see in Firefox.

1. The blue bars at the top and bottom are both only supposed to be 4px tall, yet for some reason, IE is making them stretched out around 10-15. I imagine the problem is because of the clear.gif inside it, but I haven't a clue why since I have the cellpadding set at 0 on all sides.

[code=Code]<tr>
<td background="images/site/bluebar-top.gif" height="4" style="bluebar"><img src="images/site/clear.gif" width="1" height="1" border="0">
</td>
</tr>[/code]

[code=Stylesheet]td.bluebar
{
padding: 0px 0px 0px 0px;
}[/code]

2. The shadow on the news post: it posts fine in FF, but for some reason it looks REALLY funky in IE.

[code]<table width="505" cellpadding="0" cellspacing="0" border="0"><tr><td rowspan="2" colspan="2" width="500"><table class="tborder" cellpadding="6" cellspacing="0" border="0" width="500" align="center">
<tr>
  <td class="newsHead" width="250" align="left" style="border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000"><a href="http://www.sedition-gaming.com/community/showthread.php?t=21">Introducing Sedition Gaming!</a></td>

  <td class="newsHead" width="250" align="right" style="border-right: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 0px">November 22, 2006 at 4:56pm</td>
</tr>
<tr>
  <td bgcolor="#aaaaaa" class="newsBody" colspan="2" style="border-left: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000">Page Text</td></tr>

<tr>
  <td class="newsFoot" colspan="2" style="border-left: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000" align="right">Posted by: <a href="http://www.sedition-gaming.com/community/member.php?u=1">Rikus</a></td>

</tr>

</table></td><td width="5" height="5"><img src="images/site/news-shadowcap.gif" border="0"></td></tr><tr><td width="5" background="images/site/news-shadowright.gif"><img src="images/site/clear.gif"></td></tr>
<tr><td width="5" height="5"><img src="images/site/news-shadowleft.gif" border="0"></td><td height="5" background="images/site/news-shadowbottom.gif"><img src="images/site/clear.gif"></td><td width="5" height="5"><img src="images/site/news-shadowcorner.gif"></td></tr></table><br>[/code]

3. Not an image problem, but a question about IE: I have table cell rollovers in the navigation bar that work in FF but not in IE: Does IE not support td cell rollovers?

Thanks in advance!

[ToonMariner]

Hmmm. Maybe a margin on the img?

I would switch to tableless layout anyway - much easier to construct and manage...

[fenway]

Sometimes line breaks get in the way.