Made a major revision to demonstrate issue and clarify cause in CSS:
Chrome and Safari display this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
BODY { background:#fff; }
.survey_table TD {
vertical-align:top;
}
</style>
</head>
<body>
<table class="survey_table">
<tbody>
<tr>
<td>
2. Are you familiar with the <a href="http://example.com">Louisiana Sanitary Code</a><sup>1</sup> requirements for laboratories to report notifiable (reportable) conditions to the Louisiana Office of Public Health?
</td>
</tr>
</tbody>
</table>
</body>
</html>
Like this:
Firefox and IE display it like this:
The issue is coming from the CSS on the TD vertical-align:top; Does anyone know how to get Webkit browsers to display like FF and IE and preserve the CSS vertical-alignment?
I had the same problem and decided to use relative positioning;
Wrong rendering of <sup> in table with valign=top in Chrome and Safari