I am trying to position a <span> relative to a particular image. I must use the XHTML Transitional doctype because that is what the application has been using since years before I ever laid hands on it and too much depends on it.
The following code correctly positions the <span> way off to the side:
<html>
<head>
<style type="text/css">
span.tooltip {
z-index:1000;
position:absolute;
top:200;
left:600;
}
</style>
</head>
<body>
<span class="hasTooltip">
<img src="https://www.google.com/images/srpr/logo3w.png" />
<span class="tooltip">Tooltip!</span>
</span>
</body>
</html>
However, this code breaks the <span> position, and it always appears in the same spot no matter what the left or top values are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
span.tooltip {
z-index:1000;
position:absolute;
top:200;
left:600;
}
</style>
</head>
<body>
<span class="hasTooltip">
<img src="https://www.google.com/images/srpr/logo3w.png" />
<span class="tooltip">Tooltip!</span>
</span>
</body>
</html>
How can I correctly position this <span> element with the XHTML Transitional doctype?
Use top: 200px and left: 600px. They work in any mode, whereas if you omit `px', it is incorrect CSS code and only works in Quirks Mode.