I recently came across a little cross-browser issue with using the align attribute in tables. The problem was that we had some cells centering in Internet Explorer and Opera but not in Safari and Firefox. The result was how the inheritence of the align attribute is handled by the different browsers.

The first image below is in Opera, and the second is in Firefox. I wanted it to look like it does in Firefox.

The HTML for the above is:

1
2
3
4
5
6
7
8
9
10
11
12

<table width="550px" border="1">
	<tr>
		<td align="center">
			<table border="1" width="80%">
				<tr>
					<td>Apple Sauce</td>
					<td>Pecan Pumpkin Butter</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

The problem is that the

<td align="center">

is inherited by the tables within that table for IE and Opera but not for Firefox. It’s an easy fix, just make the next <td> into <td align=”left”> to fix it. It’s nothing major, probably very well known…but the first time I’ve come across it.