1

I have an image that is set to vertical-align: text-top inside a table cell. In Internet Explorer it renders correctly, but Chrome renders incorrectly:

Internet Explorer 10 (10.0.9200.16660):

enter image description here

Chrome 29 (29.0.1547.66 m):

enter image description here

Updated to include Firefox 23 (23.0.1):

enter image description here

Three browsers, three behaviors; but only IE is what you expect.

You can fiddle the glaving on jsFiddle.

The magic ingredient is the image in a table cell:

<td class="c1" rowspan="3">
   <img src="data:image/png;base64,iVBORw0KGgoAAA....">
</td>

with the cell styled as vertical-align: text-top:

<style type="text/css">
   .c1 {vertical-align: text-top; }
</style>

The only workaround i've found is removing the vertical-align: text-top. But that causes it to render not how i want:

enter image description here

Since Chrome is the arbiter of all things good and correct, i must be doing something wrong. But what?

Note: The problem is not limited to inline data-uri images. i just use that so the problem is visible on jsFiddle.

Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219

1 Answers1

1

Just use top instead of text-top. Works for me. Also, you have forgotten to close your image tag!

Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219
weiglt
  • 1,059
  • 8
  • 15
  • `` is a *"void"* element. As such it is forbidden from having a closing tag. [W3C: HTML5](http://www.w3.org/TR/html5/syntax.html#void-elements) *"Void elements only have a start tag; end tags must not be specified for void elements."* Specifying `top` works; although the HTML spec should be updated to specify correct behavior of this case. – Ian Boyd Sep 09 '13 at 22:29
  • Still, using `` instead of `` seems more convenient (i was not talking about a closing tag, but to close your tag). Also, it no longer marks it red (=error) in jsfiddle. – weiglt Sep 09 '13 at 23:11