Tables showing up differently in Firefox and IE

[DannyB1982]

Hey everybody. My website has some nested tables (I know, I know) that are causing some problems. They show up fine in IE, but the dimensions change somewhat in Firefox. It's a small site with only 4 pages (all accessible from the left menu bar). 3 of the pages load nicely in both IE and Firefox - but my "Resume" page in Firefox doesn't seem to want to follow the template of the others, and its main content column expands each time the page is loaded. This causes some unsightly rearranging when you switch between pages. It drives me crazy, and I can't figure out the culprit.

Here's the website: Resume.

On the main section of the page (not the navigation menu), I've got two tables. One up top with my pictures and contact info, and then one down below with a long list of my acting credits. I'm pretty sure the culprit lies in that second table, since deleting it entirely resolves the issue. But can anybody pinpoint where I'm going wrong?

Thanks in advance for any help you can offer.

[tashakota]

It seems fine in Firefox and IE on my end. If my window is too small then the scroll bars take away space and the resume page "shrinks" because of the added width of the scroll bars. Is this what you're seeing?

[DannyB1982]

No, for me the whole page sort of expands. The navigation menu shifts slightly (~10 pixels) to the left.

[tashakota]

What versions of Firefox and IE? Because it looks fine on IE 7 and Firefox Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13

[DannyB1982]

Firefox version is 2.0.0.12
IE version is 6.0.2900 (but it's displaying the page correctly anyway).

So maybe it is just my slightly older version of Firefox. They might have fixed up their table displaying since then. I will upgrade and see if that fixes it. Thanks!

[DannyB1982]

Upgraded to Firefox 2.0.0.13, but the problem remains. The whole table expands on the resume page.

[DannyB1982]

Can anybody offer any suggestions?

[MidiMagic]

A few tips:

1. FF usually follows the W3C standards better than IE does. So designing for IE is usually the troublemaker.

2. The defaults for text positioning (text-align and vertical-align) are different for the two browsers. Define them in styles, and the browsers will act alike.

3. Don't put size styles (width, height) and surrounding styles (margin, border, padding) in the same tag or style. IE and FF nest them in the opposite order.

[DannyB1982]

Ok, so a bit more detective work turned up a very interesting difference b/w the two browsers.

To reiterate my problem mentioned above: I have a long table on one of the pages of my site. In IE, that page loads fine and seamlessly with the other pages. But in Firefox, when you click on the page, the whole site design is sort of ballooned outward by 5-10 pixels, apparently to accommodate an excess of content. But all my content should fit within the set parameters of the table. Anyway, here's what I figured out:

My table on the page I linked to is pretty long, and it requires scrolling downward to see the entire thing (even at my high 1900x1200 resolution). I found that if I chopped off half the table, this formatting problem went away. The table didn't become wider in Firefox as it had in the past. HOWEVER, if I lowered my screen resolution (giving me less screen real estate), this newer, shorter table caused the same ballooning problem as before.

So, it seems that Firefox does some weird re-formatting of my table when it can't fit the entire thing on the screen vertically. The weird thing is that it adjusts horizontally instead of vertically. I can't figure out why it does that. IE does not.

If anyone can offer me a way to recode the thing so that it doesn't have this problem, I would much appreciate it. But if not, I figure this little Firefox quirk might be good to know about in the future for all you other developers.

[MidiMagic]

It's not the content, but the surrounding styles that causes FF to change the table sizes.

If you have a two-column table in FF and have surrounding styles (margin, border, padding) on the td or tr, then setting the width of both columns to 50 percent makes the table too wide for the window. This is because you have each td at 50 percent, PLUS the sizes of the surrounding styles.

This is w3c standard. IE does this wrong.

The trick is to set these styles to 0 in the td style definition, and put a div inside the td, with the surrounding styles you want on the div. Then it works the same in both browsers, and the 50 percent is reaslly 50 percent.