table breaking appart, not sure where help

**katerone** · 05-16-2006, 03:40 PM

I have a site that is almost complete for the exception of one detail. the home page seems to be breaking apart a bit on one area. I tried looking closely at the code, but no dice.

the site is at:
http://www.katerone.com/khaga

by the way this only happens with IE on a pc..

any thoughts?

**vangogh** · 05-16-2006, 06:12 PM

Are you referring to the separation between the top half of the site and the bottom half? If so I think IE is defaulting to keeping the height of the cell to be whatever the font-size is. You might need to specify an exact height on the table cell and possibly add a non-breaking space inside. IE can be finicky sometimes on hieghts when nothing is inside an element.

If that doesn't work you can try reducing the font size of that cell.

I think the basic problem though is IE using a default height which is coming from the size of the font.

**mgraphic** · 05-16-2006, 06:45 PM

There has always been an instance in IE (especially in xhtml format) in which whenever you have an image inside a TD cell, it will always put a gap under the image making the TD cell a little taller than the image. I found a workaround with this by placing a <BR> tag after the image, this seems to always work.

HTML Code:

<table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>
         <img src="./example.gif" width="100" height="100" border="0" alt="" /><br />
      </td>
   </tr>
</table>

**vangogh** · 05-17-2006, 12:14 AM

That's interesting and makes sense. I think you could probably also use css to contol the margins of the image or explicity set the image to display inline. Just guessing about those.

**kIDJOE** · 05-17-2006, 09:47 PM

You should use CSS to set the width and height of the cell, also you can always add css to your images as well, you can add border:0px; and margins:0px; padding:0px; to avoid any gaps around your image.

**colbyt** · 05-18-2006, 08:34 AM

I looked at the site it IE and it looked fine except for the the footer image which went on FOREVER. Just a typo in this code I bet:

HTML Code:

<iframe src ="header.htm" height="109" width="100%" frameborder="0" scrolling="no" frameborder="0" name="header"> </iframe>
<iframe src ="home_bottom.htm" height="2600" width="100%" frameborder="0" scrolling="no" frameborder="0" name="bottomFrame"> </iframe>

height="2600" width="100%"