I am having problems viewing a table-formatted e-newsletter correctly in the newest version of Firefox. It is formmated with tables within a container table. It views fine in IE and older versions of Firefox. The problem is the right floated table, that is supposed to align to the right of another table like columns is being bumped down below the first imbedded table.
Please see the attached screen shots of the newsletter viewed correctly in an older version of Firefox, and incorrectly in Firefox 3. Sitepoint won't allow me to post the URL.
I have searched high and wide on the web for others that have had this problem, and haven't found anything about it. It just arose recently with the release of Firefox 3.
I know divs and CSS is the optimal way to go for formatting, but unfortunately with the email newsletter we have to stick with the tables.
Any help or insight appreciated. Thanks!
Charlotte
I'm surprised you say it works in older versions of Firefox. You're missing a doctype which puts IE into quirks mode. If you used IE to initially test this, you'll have all kinds of problems. Notice the other modern browser, Safari, also displays as FF does which tells you something about IE. You will never get IE to attempt to display like the other more modern browsers without a proper doctype. Since you are using older html, I suggest using this one on your first line:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Thanks for the suggestion. I added a doctype and fixed most of the html errors with the Markup Validation tool, and the problem has not gone away. Safari dispays it correctly.
One problem I've found in FF3 that isn't in FF2 is a strange sort of table inheritance. This might not be your problem but here's what I found:
I had two tables (not nested inside any other tables, just siblings next to each other), one of which was centered with automargins and another who was supposed to float: right and stay to the right side of the container (and under the first table, these were not side-by-side).
pseudo-HTML:
<container>
<table1/>
<table2 id="something"/>
</container>
something like that.
In every browser except FF3 this worked. FF3 was centering BOTH tables.
Normally you cannot center a float with automargins but apparently the second table was somehow inheriting the margin: 0 auto from the first table (despite the second table having an #id and being floated right). Specifically stating that the #id'd table have margin: 0 fixed this.
Though this being email I'm not sure how much css you're using.
I'm also not 100% certain what FF3 was doing. While specifiying the margins did fix the problem, that doesn't mean it wasn't actually some other issue disguised as a margin problem.
Another issue that MIGHT be causing your problems is the width of the dropping table. Your screenshots kinda look like float drop. Tables don't normally do this, but it might be something FF3 is doing because it thinks there isn't enough room for your two nested tables to fit side-by-side. Is there a specific width on the dropped table?
Though in my tables in FF3 if something is too wide inside a table the table would rather just go offscreen than break the row.
Bookmarks