ansaurus

Question

img with {display: table-cell} -- is it a bug?

Answer 1

A:

I see what you meant when I render the codes in FF. My initial thought was the doctype but it doesn't help with loose, transitional or strict.

Going through a W3C reference at http://www.w3.org/TR/CSS2/tables.html#table-display
Here's an excerpt:

For example, an image that is set to 'display: table-cell' will fill the available cell space, and its dimensions might contribute towards the table sizing algorithms, as with an ordinary cell.

Seems to me that non-container elements will just fill the 'cell space' but not acting like a true cells. Which explains the border 'bug'.

I am hesistant to think the FF/Webkit-based browsers are rendering it wrongly but IE is correct. Perhaps someone can prove otherwise. :P

My 2 cents.

o.k.w 2009-12-30 00:39:57

Answer 2

+1 A:

The problem seems to be mostly due to the border-collapse. If you remove that, the alignment problem goes away. I can't seem to find any other discussion of this problem online but I have noticed bugs in the border-collapse: collapse algorithm many times in Firefox and Safari (lines that disappear/reappear as you scroll, etc). This appears to be just another bug in that algorithm.

You're are right however, that it is specific to the image, if you wrap the images in divs, the problem goes away:

<html>
<head>
    <style>
        .photos {display: table; border-collapse: collapse;}
        .photos > div {display: table-row; border-collapse: collapse;}
        .photos > div > * {
            border-collapse: collapse;
            display: table-cell;
            vertical-align: top;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="photos">
        <div>
            <p>Hello World</p>
            <div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
            <p>Hello World</p>
        </div>
        <div>
            <p>Hello World</p>
            <div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
            <p>Hello World</p>
        </div>
    </div>
</body>
</html>

I've tested this in Firefox 3.1 in Ubuntu and XP, Firefox 3.5 in XP, Safari 4 in Wine and XP, and Chrome 3 in XP and they ALL exhibit errors in rendering the border-collapse. Only Firefox shows the image table-cell as one pixel low.

Opera 9.52 in XP oddly does not display the image at all. Opera 10.10 in XP behaves like the rest.

Perhaps there's something about the spec that causes so many browsers to interpret this way.

Rob Van Dam 2009-12-30 03:41:33

Answer 3

A:

I'm not sure I understand the problem. If you give this a doctype, all the browsers look the same.

Rob 2009-12-30 04:23:33

According to o.k.w. giving this a doctype does not solve the problem. Did you do a test that contradicts this?

Danny Roberts 2009-12-30 04:30:29

I tried it with all the doctypes at http://www.w3schools.com/tags/tag_DOCTYPE.asp on Firefox, and they all rendered the same.

Danny Roberts 2009-12-30 04:33:56

First, no one should ever attempt to create a web page without a doctype due to behavioral differences. All modern web pages MUST have a doctype.The only differences I saw were between IE and all the others (IE rarely behaves like the more modern browsers do). I added the html5 doctype which will put them all into standards mode and they all behave the same. Safari, IE, Firefox and Opera.

Rob 2009-12-30 04:57:10

ansaurus

tags:

views:

answers:

img with {display: table-cell} -- is it a bug?

related questions