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.