AaronMT Posted June 7, 2010 Share Posted June 7, 2010 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 More sharing options...
0 +Majesticmerc MVC Posted June 8, 2010 MVC Share Posted June 8, 2010 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 More sharing options...
Question
AaronMT
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