HTML - make the cells the same height
March 7, 2009 11:11 PM   Subscribe

HTML - Why aren't these two table cells the same height?

I want this HTML to display with the image and text side-by-side, with the size of the image and the size of the text block cell to be the same height. If you display this html in Explorer 6 or Firefox 3 on Windows XP, the text block is taller. Why, and how would I make them the same height--i.e. the exact height of the image, 117 pixels.

The original html is being generated by TinyMCE in Joomla 1.0. This simpler version has all the Joomla gunk stripped out, but still has the key html and renders incorrectly--the right hand (3rd) cell in the second row of the table is taller than the first cell containing the image.
I've changed all the angle brackets to brackets so the ask wysiwyg editor doesn't render the html:

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]
[head]
[title]TEST[/title]

[/head]
[body]


[table border="0" cellpadding="0"]

[tbody][tr][td colspan="3"]HERE IT IS[/td][/tr]

[tr style="height:117px"]

[td style="width: 94px; height: 117px"][img

src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Robin_Hood_Memorial.jpg/180px-Robin_Hood_Memorial.

jpg" width="94" height="117" /][/td]

[td style="background-color: #ffffff; width: 1px"] [/td]

[td style="font-size: 8px; line-height: 2.0; color: #ffffff; background-color: #000000; height: 117px; width:

94px"]Why[br /]on earth[br /]doesn't this[br /]work?[/td][/tr][/tbody][/table]


[/body]
[/html]


posted by lockedroomguy to Computers & Internet (6 answers total) 2 users marked this as a favorite
 
For whatever it's worth, it works fine in IE7 and Firefox 2. (I don't have anything else I can test it with.)
posted by Chocolate Pickle at 11:26 PM on March 7, 2009


Well, for starters, you're using square brackets rather then angle brackets. The code should look more like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>TEST</title>

</head>
<body>


<table border="0" cellpadding="0">

<tbody><tr><td colspan="3">HERE IT IS</td></tr>

<tr style="height:117px">

<td style="width: 94px; height: 117px"><img

src="http://upload.wikimedia.org/wikipedia/commons/thumba/a9/Robin_Hood_Memorial.jpg/180px-Robin_Hood_Memorial.jpg" width="94" height="117" /></td>

<td style="background-color: #ffffff; width: 1px"> </td>

<td style="font-size: 8px; line-height: 2.0; color: #ffffff; background-color: #000000; height: 117px; width:

94px">Why<br />on earth<br />doesn't this<br />work?</td></tr></tbody></table>


</body>
</html>
That makes it easier for people to copy, paste, and test, too.

But other then that, web browsers will often resize table cells to whatever they want, table size constraints are just suggestions, but for some reason firefox wants to put extra padding on the bottom of the cell with the image (I tried setting the background of that cell to red)
posted by delmoi at 11:35 PM on March 7, 2009


Best answer: By using the XHTML 1.0 Strict doctype you're triggering Standard mode which makes images align to the text baseline, creating a space below.

From the Mozilla Web Developer FAQ:
Why are there gaps between image rows in tables when the layout engine is in the Standards mode?

In the CSS2 box layout model the default vertical sizing of layout boxes and the default vertical alignment of images is different from the behavior of old browsers. These aspects of the layout can be changed by explicitly setting the display CSS property of the images (and possible surrounding <a> elements) to block.

If the table cells that contain only an image are marked with <td class="imgcell">, the required CSS rule is: .imgcell img, .imgcell a { display: block; }
More info here.
posted by Memo at 11:35 PM on March 7, 2009


(oops, I seemed to have mixed up the image URL in my HTML). Anyway, for some reason firefox 3 is putting 5 extra pixels under the image, making the total height 122 pixels. I set the background of the cell with the image to red, so I could see it.

Using this for my image tag worked:

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Robin_Hood_Memorial.jpg/180px-Robin_Hood_Memorial.jpg" width="94" height="117" style="margin-bottom: -5px">
posted by delmoi at 11:44 PM on March 7, 2009


<img style='display: block' ...> instead of hardcoding a margin-bottom as it depends on the users fonts.
posted by flif at 12:32 AM on March 8, 2009


Response by poster: Thanks all. I will work around it.
posted by lockedroomguy at 12:50 AM on March 8, 2009


« Older Rites of passage and the requisite advice   |   Merging folders in OS X Newer »
This thread is closed to new comments.


Tags

Share