You will need to apply CSS to the table cells to center text
text-align: center
Thread Starter
gbaka
(@gbaka)
yea I don’t that’ll work
heres what it looks like
The image you posted has nothing to do with the way you described your setup.
You said you had the first row span 3 columns. What i see is one row with two cells in it. Where us your table HTML code, or even better, a URL of the page with the problem.
Are you referring to horizontal centering or vertical centering?
DO you have a width set on the table that prevents the cells from expanding past a certain width?
Thread Starter
gbaka
(@gbaka)
it is span 3 rows thats the problem it do it properly on firefox unless I’m doing something wrong with this code
<table border="1">
<tbody>
<tr>
<th rowspan="3" class="avatar"><img src="http://ani-down.com/wp-content/uploads/2009/10/default.gif" alt="" /></th>
<td>adasda</td>
</tr>
<tr>
<td>fsdfsdf</td>
</tr>
<tr>
<td>sfdfsdf</td>
</tr>
</tbody>
</table>
I just loaded the code you sent on a web page just by itself and viewed it in FF 3.0 and 3.5. It displayed as you want it to display – all 3 cells in the 2nd column were to the right of the image in the first column which was 3 cells tall.
Try it yourself – put that code on a page by itself and view in the browser.
Maybe some other styling is interfering when its on your live page?
Thread Starter
gbaka
(@gbaka)
that’s probably it but i don’t see anything in the css that’s interfering with it, it might be the other table…
I know this topic is quite old, but since it was one of the first results on google about the issue, and I couldn’t find a solution anywhere, I’ve decided to post it here anyways.
After a quick bit of hit-and-miss debugging I was able to figure out a solution to this problem. Apparently, FireFox handles some CSS styling differently than IE. Vertical-align is one of those. Changing your CSS a bit should give you the result you want with little to no impact on the rest of your website.
This was the problematic CSS code I had:
td {vertical-align: text-top;}
After changing it to the following, everything worked as expected in both FireFox and IE:
td {vertical-align: top;}
As you can see, all I did was chance “text-top” to “top”. For some reason, when using text-top alignment in firefox, you end up with some very ugly results when you put images inside of table cells with rowspans. If nothing else, I know I’ve learned my lesson and will avoid using text-top alignment in my CSS styles in the future.
Best of luck to anyone else who had this problem.
