Home/ Questions/Q 7740953
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:54:22+00:00

I am trying to position a <span> relative to a particular image. I must

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0