Menu
I have following code with doctype transitional but when I set it to strict then the position of images get changed and moves upward. Could you please help me in understanding the underlying issue and where I can find list of these type of other CSS conflicts between different doctypes.
Please note that I know that few HTML tags are not available in strict mode but I am specific about CSS conflicts.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<style type="text/css">
span.check:before { content: url("http://i41.tinypic.com/2rxea7d.png"); }
</style>
<table>
<tr>
<th>Ruby on Rails</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th>Road on Rails</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
</table>
</body>
</html>
232
In quirks mode and almost standards mode the images (which are inline content, so are laid out on the same set of lines as font characters) are zero-height positioned at their baseline.
You can get the same effect in Standards mode by twiddling the vertical-align property of your generated images or setting them as display: block.
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
