• 0

Very simple HTML table difference displayed in Webkit vs Gecko, why?


Question

Please take a look at the following code

<!DOCTYPE html>
 <body>
  <table border="1">
   <tr>
    <td rowspan="3"><img src='main-menu.gif' /></td>
    <td>0</td>
   </tr>
   <tr>
    <td>1</td>
   </tr>
   <tr>
    <td>2</td>
   </tr>
 </table>
</body>
</html>

main-menu.gif (179x403)

See demo: http://brasstacks.aaronmt.com

Why will the table cells evenly distribute in Gecko but in Webkit based browsers the the bottom table cell will have a vast height variance? How do I go about supporting both engines for something so trivial?

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

You haven't applied any styles to the table, therefore the browser simply has to "best guess" how the render the table. In this case, Gecko and WebKit are using different solutions to the same problem. The simplest thing to do would be to set the height of the cells using the css "height" property to set the cells to the same height. This (provided CSS gets properly applied) will make the effect the same across all browsers.

<!DOCTYPE html>
 <head>
	<style type="text/css">
		#theTable tr>td {height:134.33px;}
	</style>
 </head>
 <body>
  <table id="theTable" border="1">
   <tr>
    <td rowspan="3"><img src='main-menu.gif' /></td>
    <td>0</td>
   </tr>
   <tr>
    <td>1</td>
   </tr>
   <tr>
    <td>2</td>
   </tr>
 </table>
</body>
</html>

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.