I have this tables with one row containing a div. The div contained an image with height of 76px. It displays fine in FF and IE. But…it screws up in chrome!
I’m surprised cause I’d always thought Chrome and FF were based on the same engine?
Doing a offsetHeight tr check shows 113px in chrome, and 87 in FF. Is there some issue I have to take note of for chrome?
Can you post a link so we can take a look? 
As Ryan said we’d need to see the page as Chrome doesn’t normally have an issue with this.
Actually i tried doing a simple table with a div and image. I can’t recreate the height problem, but I can still see a difference in tr width for this table below between chrome n ff. FF shows 348, Chrome shows 352. Any clues?
<!DOCTYPE html>
<head>
<html>
<style type="text/css">
* {padding:0;margin:0;}
div.catagory-title-wrapper {background:none;z-index:-1;position:relative;}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<table id="s_table">
<tr id="s_row">
<td id="s_cell">
<div class="catagory-title-wrapper"><img src="someimage.png" id="s_img"/></div>
</td>
</tr>
</table>
I’m getting the same results for Firefox and for Chrome with the above code.
An image is an inline (replaced) element and depending on browsers, doctype etc it will be placed on the baseline of the cell and not the bottom thus pushing the cell higher to allow room for descenders.
You would need to set the image to vertical-align:bottom (or set it’s display to block) to kill all the whitespace.
Remember also that any whitespace between the td tags will be treated as space between words and may increase the width/height depending on browser so always close the tag at the end of the content and don;t leave gaps.
However, I didn’t see any of this issues when testing with your code above but they are common issues.
you do? hmm…weird. i’d fixed the problem giving some fixed height to my elements.
I’ll try to do another page just for testing purpose when I have the time. Thanks for checking it out though.