CSS: Position absolute with XHTML Transitional Doctype

Go To StackoverFlow.com

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?

2012-04-04 03:38
by dotancohen
Are you sure it's the doctype declaration that's causing issues? I don't believe there's any difference in absolute positioning between standards and almost standards mode.. - BoltClock 2012-04-04 03:49


3

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.

2012-04-04 05:06
by Jukka K. Korpela
Thank you, I should have noticed that - dotancohen 2012-04-04 13:42
Ads