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

**Eekboom** · Oct 18, 2007 03:13

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.

**Ruben K.** · Oct 18, 2007 03:24

I can't see the attachments, but would adding some padding to the tables make a difference?

**Eekboom** · Oct 18, 2007 03:36

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?

**AutisticCuckoo** · Oct 18, 2007 03:39

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>

**DaveWoods** · Oct 18, 2007 04:02

Maybe I'm misunderstanding the original question but could you not just float: left; the table's instead?

**AutisticCuckoo** · Oct 18, 2007 04:08

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?

**DaveWoods** · Oct 18, 2007 04:29

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

**Eekboom** · Oct 18, 2007 04:40

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.

**DaveWoods** · Oct 18, 2007 04:56

Why not float the parent div or apply overflow: auto; to the div then?

**DaveWoods** · Oct 18, 2007 05:44

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>

**Eekboom** · Oct 18, 2007 06:59

Thanks Dave - that's working nicely!
I don't really understand why you used the "height: 1%;" on the div. Seems to work fine without it (at least on Firefox 2, IE 6 + 7).

**DaveWoods** · Oct 18, 2007 07:13

Try removing the height: 1%; style and then check it again in Internet Explorer 6

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions