SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Location
    San Francisco, CA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table formatting problem in Firefox 3

    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
    Attached Images Attached Images

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Location
    San Francisco, CA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, don't remove the doctype from your site because, no matter what, you need it. Until you insert that back in, we aren't able to help.

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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>

    table1 {
    width: whatever;
    margin: 0 auto;
    }
    table2#something {
    width: something small;
    float: right;
    }

    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.

    Hope this gives you some ideas of stuff to try.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •