I recently added DOCTYPE to a page, but this caused some table cell formatting to break. When the page loads, the cell should appear with a green background.
Here’s what’s happening (fiddle)
Note the page loads without the green background as specified in the inline style tag. If I hover over, the style goes into effect and remains.
The page should load with the background color properly rendered (without having to mouseover to initiate it).
I can’t show the working example because JSFiddle includes DOCTYPE on their page. If I remove the DOCTYPE line, the css works as expected.
Here’s the code, with DOCTYPE line:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<body>
<table width="100%">
<tbody>
<tr style=" background-color:#FFFEF7; ">
<td style="color:FFFFFF; background-color:009C00;" title="It's Hard Being Green" onmouseover="this.style.background='#40b540'; this.style.cursor='pointer'" onmouseout="this.style.background='#009C00';">It's Hard Being Green</td>
</tr>
</tbody>
</table>
</body>
</html>
Try adding
#to the color declarations: