Grow your CSS skills. Land your dream job.

issues with Firefox not displaying nested table within divs

  • # August 6, 2008 at 9:06 pm

    Hi all,

    Help! I’m a newly-graduated web designer, and I’m still learning the
    ins and outs of programming.

    I’m using Dreamweaver to create a site with divs. I then incorporated
    a table within a div. It displays fine in IE7, but in Firefox, the
    table cells (and padding) are making each cell look twice the size
    they do in IE (it looks like there’s much more cell padding above and below the text in each cell.)

    So the table is extending down, past my gradient image background, so that
    the background starts again and the text is laid over top. (Looks
    horrible! I know how to fix the background, but then I’d have to
    extend the div down a lot, and anyway the bigger table doesn’t look
    right.)

    Any ideas what could be throwing off the table size in Firefox? Which
    properties in the div or table should I be looking at? (BTW, the table
    was copied and pasted from MS Word.)

    I’ve read that this actually an IE issue, and that Firefox is reading the code "right."
    But it doesn’t really matter to me, I just want the page (and table) to display properly
    in both IE and Firefox!

    I’ve checked the sizes of all the divs to make sure they big enough to accommodate the table.

    Here’s a bit of the div code:

    <div id="container">
    <div id="content">
    <div id="header2"><img src="support/header2.jpg" alt="header"
    width="796" height="157" /></div>
    <div id="box">
    <h1 align="center" class="style7">Heading here</h1>
    <div id="pic_right"><img src="support/woman_online.jpg"
    alt="woman online" width="349" height="529" border="1" /></div>

    then further down, the table code:

    <table width="97%" border="1" align="center" cellpadding="3"
    cellspacing="1">
    <tr>
    <td width="45%"><p class="style8">Class</p> </td>
    <td width="55%" class="style6"><p
    class="style8">Description</p></td>
    </tr>
    <tr>

    This site is a work in progress, so it’s not on the net yet. Please
    let me know if you need any more info to make sense of this.

    thanks!! :D

    # August 7, 2008 at 4:14 am

    It would be helpful if you could quote all the code and maybe give a link to the site.

    First thing i would suggest is to get rid of the table and use divs instead.

    box
    # August 7, 2008 at 5:12 am

    I agree, ditch the improperly formatted table, ditch the inline styling, ditch the non-essential divs.

    # August 7, 2008 at 11:12 am

    thanks everyone… I was afraid of that (having to rebuild the tables with divs)…. but it shouldn’t take too long, and will be for the best in the long run :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".