SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gecko: Wrong position of tables with "display:inline;"

    I am going crazy with getting my layout right across browsers.
    The following page looks good in IE 6 + 7, but Firefox 2.0.0.7 does something very strange (for simplicity I simply added the style inline):

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <title>Test</title>
        </head>
    
        <body>
            <div style="border-width: 1px; border-color:red; border-style: solid;">
                <table border="0" cellpadding="0" cellspacing="0" style="display:inline; background-color:lightblue;">
                    <tr><td>Foo?</td></tr>
                </table>
                <table  border="0" cellpadding="0" cellspacing="0" style="display:inline; background-color:lightgreen;">
                    <tr><td>Bar!</td></tr>
                </table>
            </div>
        </body>
    </html>
    What the heck is going on here?

    Of course it would be nicer not to use tables here, but this is generated code that would be _very_ hard to change.
    Attached Images Attached Images

  2. #2
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't see the attachments, but would adding some padding to the tables make a difference?

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ruben, thanks for the answer.
    When I posted, I did not know that the attachments would need to be approved before being visible to the public.

    Anyway:
    On IE it's nicely packed: Red border, then two blue, resp. green areas that vertically fill the border and have nicely aligned texts.

    On Gecko there is a white gap between the top border (4px) and the colored areas, between the bottom border and the areas (1px) and in between the two colored areas (4px). Additionally the top of the text starts 1px above the colored areas.
    (Sorry for the long description. I am at work and cannot upload the png's because the firewall won't let me ftp.)

    I forgot to mention: I added "margin: 0; border: 0; padding: 0;" everywhere and it did not make the slightest difference.

    Why does FF insists on adding these gaps?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The proper value to use here would be display:inline-table. Gecko doesn't support this, but they have a -moz-inline-table that is said to be similar (I haven't tried it).

    IE doesn't support inline-table either of course. Opera and Safari support it.

    The only other option is to set display:inline for all the internal table objects as well. You'll also have to reset a whole bunch of properties that are set in Gecko's user agent style sheet for those objects.

    Here's a version that I think displays the way you want it in Opera 9, Firefox 2 and IE 6.
    Note that you have to insert explicit tbody elements (unless you can provide styling through another mechanism than style attributes).
    Also note that you must get rid of all the white-space text nodes between the elements, since those will otherwise render as spaces when you use display:inline
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <title>Test</title>
        </head>
     
        <body>
            <div style="border-width: 1px; border-color:red; border-style: solid;">
              <table border="0" cellpadding="0" cellspacing="0" style="display:inline; border-collapse:collapse; background-color:lightblue;"
                ><tbody style="display:inline; vertical-align:top"><tr style="display:inline; vertical-align:top"><td style="display:inline; padding:0">Foo?</td></tr></tbody></table
                ><table  border="0" cellpadding="0" cellspacing="0" style="display:inline; border-collapse:collapse; background-color:lightgreen;"
                  ><tbody style="display:inline; vertical-align:top"><tr style="display:inline; vertical-align:top"><td style="display:inline; padding:0">Bar!</td></tr></tbody></table>
            </div>
        </body>
    </html>
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I'm misunderstanding the original question but could you not just float: left; the table's instead?

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suppose I'd better explain the whys and the wherefores here, shouldn't I?

    You were telling the table elements to generate inline boxes. No problem there.

    But the immediate child of an table element is an implicit tbody element, which is set in user agent style sheets to have display:table-row-group. The rules governing table rendering in CSS state that if a row group doesn't have a table parent, one should be generated. So you get a generated table pseudo-object inside your real table element!

    In the same vein, the tr elements must be set to display:inline to override the default display:table-row, since a table object will otherwise be generated as its parent.

    The same applies for the td elements (default display:table-cell), or there will be a generated row parent which, in turn, will have a generated table parent.

    This explanation probably adds to the confusion rather than eliminate it, doesn't it?
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Clear as mud

    But that still doesn't explain why the OP couldn't just float the both tables left so that they sit next to each other instead of using display: inline; in the first place

  8. #8
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Tommy, that made my day.

    I have to chew on your explanations a while.

    BTW: I tried to strip down your code to see what the necessary minimum styling is. This works the same way as your example code (I've added orange background to the div):
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <title>Test</title>
        </head>
    
        <body>
            <div style="border-width: 1px; border-color:red; border-style: solid;padding:0;background-color:orange;">
                <table border="0" cellpadding="0" cellspacing="0" style="display:inline; background-color:lightblue; padding:0;vertical-align:top; ">
                    <tbody style="display:inline;">
                        <tr style="display:inline;">
                            <td>Foo?</td>
                        </tr>
                    </tbody>
                </table>
                <table border="0" cellpadding="0" cellspacing="0" style="display:inline; background-color:lightgreen; padding:0;vertical-align:top; ">
                    <tbody style="display:inline;">
                        <tr style="display:inline;">
                            <td>Bar!</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </body>
    </html>
    It works ok, but is not perfect: The div box is one pixel higher on gecko and there is a single pixel gap between the tables and the dov at the bottom. I can hide that with appropriate background color for my div.

    @csswiz: Floating the table will not visually nest them in the div.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not float the parent div or apply overflow: auto; to the div then?

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an example and should be identical in all browsers

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        * html div {
    	    height: 1&#37;;
        }	
        </style>
    </head>
    <body>
        <div style="overflow: auto; border-width: 1px; border-color:red; border-style: solid;">
            <table border="0" cellpadding="0" cellspacing="0" style="float: left;; background-color:lightblue;">
                <tr><td>Foo?</td></tr>
            </table>
            <table  border="0" cellpadding="0" cellspacing="0" style="float: left; background-color:lightgreen;">
                <tr><td>Bar!</td></tr>
            </table>
        </div>
    </body>
    </html>

  11. #11
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dave - that's working nicely!
    I don't really understand why you used the "height: 1&#37;;" on the div. Seems to work fine without it (at least on Firefox 2, IE 6 + 7).

  12. #12
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing the height: 1&#37;; style and then check it again in Internet Explorer 6


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
  •