Table Cell Height problem in IE8 but works fine in Chrome

[datop123]

Hi all,

Sorry if this was already posted, I did a lot of searching and did not find anything that could help my situation.

For starters, I am a self educated Beginner developer, I am using available sample codes so some of the stuff may be very very old (((

Here's my situation:

Link to the discussed problem: http://homenumber.org/sarke/OurExperience1.php

I used Fireworks CS5 to cut up background image and had Fireworks assemble a table with the image. Then I used Dreamweaver CS5 for rest.

In one Cell I am calling another page <? include "OurExperienceDetails.php" ?> that is bigger than originally designed cell height.

So here's the problem:

In Chrome everything works normally as it should, INCLUDE Cell expands and only causes the RIGHT Bottom cell to increase in Height that has background that follows

But in IE8, all cells that are located to the RIGHT of the INCLUDE Cell increase in Height, thus causing the disturbed image. To better visualize the problem, I gave different color backgrounds to problematic cells.

I really need any advice that I can get .....

Thanks to All ....

[datop123]

Come on guys ....

any suggestion is greatly appreciated ....

[Excavator]

Hello datop123,
I would not even know where to begin short of a total re-write. It's unfortunate you spent so much time building a site with outdated methods (see the link about tables below).

The best I can suggest is fixing the errors in your code while you wait to see if a table guy will have a look at it.

[datop123]

Thanks for the advise Excavator. I will start fixing with Validator.

But thing is that most of the issues listed in Validator were created by Fireworks CS5 or Dreamweaver CS5. I would assume these version should have used newer code. Were did I go wrong?

[SB65]

Agree with all the things about tables and old code etc etc, but....

...somewhere on the 20th row of your table you have this:

<td background="img/background.jpg" colspan="9"></td>

Have a try setting the height of this cell:

<td height="550" background="img/background.jpg" colspan="9"></td>

Logic here, the table is being stretched vertically, so all the cells on the right hand side are being stretched a bit. If we add an explicit height to that cell, it alone takes up all the slack, the other cells are not expanded, and your design is OK. You might be able to do the same on other cells.

Works in Firebug (your existing page is broken in FF as well as IE). Not sure it'll work in IE.

EDIT: Works in IE7.

EDIT AGAIN: Just reading Excavator's early post I would like to categorically deny that I am a "table guy".

[datop123]

Thanks for advice SB65, I manually adjusted the cell height and its works in IE8.

But is there any way this can happen automatically? if INCLUDE page content changes then I have to manually adjust the height AGAIN

[SB65]

I'm not aware of how you could make that happen automatically, no. The problem is caused by the use of the table, really. Get rid of that and you'd have no problem.

[datop123]

If I don't use tables how can I make the images align correctly? Can you guide me to right direction ...