John John - 1 month ago 14
CSS Question

Firefox css border-width on td element

I can't get the border width to be 3px solid green in firefox, even though it is working in Chrome. How can I fix this? My code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style>
td {border: 3px solid green; background:blue;}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Answer

To eliminate the spaces and avoid double borders between the cells you have to collapse them, like:

table {
    border-collapse: collapse;
}

DEMO

Also it's a good idea to use some kind of CSS discrepancy eliminator, which can save you a lot of time and helps avoid situations like this - Normalize CSS or CSS Reset