CODEWITHSUNDEEP
cssinternet-explorer-6height
Chris Lercher
Chris Lercher

Reputation: 37778

IE6: Height "1em minus 1px"

I need a div with a height of exactly 1em minus 1px. This can be achieved in most browsers like this:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">

        .helper {
            /* background-color: black; */

            position: absolute;
            top: 5em;
            left: 5em;

            width: 2em;
            height: 1em;
        }
        .target {
            background-color: #89f;

            position: absolute;
            top: 0;
            bottom: 1px;

            width: 100%;
        }           
    </style>
</head>
<body>
    <div class="helper">
        <div class="target"></div>
    </div>
</body>
</html>

The "target" div has the desired height. The problem is, that this doesn't work in IE6, because it ignores the bottom attribute, when top is set (a well known problem).

Is there a workaround for IE6 (maybe with multiple nested divs, with borders/paddings/margins/whatever), or will JavaScript be the only solution?

Please note, that I can't use Quirks Mode.

Upvotes: 1

Views: 1094

Answers (2)

Emily
Emily

Reputation: 10088

Does the target div have to be physically 1px smaller or just display 1px smaller?

The easiest way would be to add in an "ie6 only" stylesheet:

.helper {overflow:hidden;}
.target {top:auto;}

This will display target as 1em - 1px but its real height is 1em with the top 1px is hidden.

IE6 is flaky when it comes to absolute positioning support.

Another solution, instead of the code above, would be to add in an "ie6 only" stylesheet:

.target {position:static;margin:-1px 0 1px 0;}

I see you got the absolute positioned solution to work. Great!

Upvotes: 2

dariol
dariol

Reputation: 1979

Is it required by the client? If not then just abandon IE6 and hacks for this crappy/old browser.

Upvotes: 1

Related Questions