Tables break in IE.. (work perfectly in Mozilla)

Hi all,

I would REALLY appreciate some assistance with a web design problem I've been having on my site,
http://www.watercascades.com/troy

In Mozilla the header/table format displays **perfectly** but in IE the divided tables on the left (where the picture of me is) are consistently split up.

I've noticed that the width of the center area's content often determines how far the left tables are split apart in IE. If the middle area has just text (try the Tweaking or Playwriting pages) then the pieces of the body are joined. But most of the other pages show a split, disjointed body.

I know I have really crappy CSS organization, but this table splitting problem in IE has been baking my socks for far too long.

I've also ran the site through HTML validators-- none of the reported errors would have anything to do with table alignment (ALT tags, PHP GET statements, etc).

Any help at all would be appreciated... thanks!

Just looking at the source code briefly, I see that some of your tables are in percentages and some are in absolute pixel format. I have found in the past that when you mix and match like that you have to be real careful. That could be an issue to look at.

Thanks bob,

While that didn't fix the table alignment problem I'm having in IE, it was something I forgot to change. The two tables with 100% widths now are at a tidy 488 pixels.

Nothing has changed in IE regarding the tables, though. It's driving me batty!

So if anyone has some suggestions on how to debug this, I'd be grateful

If you right click on each part of the separated images and do a "save as", you will see that they are three different slices of the image. If you then do a search for each image slice in the code, you will see that they are all over the place. I dont know what you are attempting to do in your layout, but with all the spacers and image slices,
I would not think you are going to get consistency between all browsers with the way the tables are laid out. Try to keep all the image slices together.

Well, I fixed it, but not without a lot of work The main issue was that I let ImageReady slice up my header in a way that didn't take kindly to having long tables. The fix? Tables within tables, and a redefinition of the row scheme. It's working fine so far, which is great. No more messing with CSS Box Hacks that won't work

On the other hand, if anyone catches this thread... how do you remove margins from an HTML/CSS document without using the marginheight and marginwidth tags that ruin HTML validaton?

Thanks Zombie! I'll resolve this thread now