It seems that using Google's Dosis font is causing issues with table layout:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dosis" />
<style type="text/css">
table {
width: 100%;
}
td {
outline: 1px solid red;
}
#test {
font-family: "Dosis";
}
</style>
</head>
<body>
<table id="test">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
<table id="control">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
In the scenario above, cells in the table with the Dosis font appear unevenly spaced, while those without a specified font family are displaying as expected.
Surprisingly, this inconsistent behavior occurs consistently across Firefox, Chrome, and Opera.
Can someone please provide an explanation for this, and potentially offer a solution?