IE6 Strict Mode & Top:0, Bottom:0

Question

I am building an extensible window control in JavaScript and intend to use two boxes as follows:

<div id="outer">
    <div id="inner">
        content goes here...
    </div>
</div>

The CSS for this would be as follows:

#outer {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 200px;
    width: 200px;
}
#inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 10px solid red;
}

The idea being that the inner box's offset height and width will never be greater than 200px even if it has a border (as shown in the CSS).

This works in all major browser, but not in IE6. The reason being that it does not support the idea of combining top: 0, bottom: 0, left: 0 and right: 0 to fill to the parent container.

In Quirks Mode, because the box model is royally screwed, you can set height and width to 100% and be done, however, I am working in standards mode.

Is there a pure CSS solution? If not, can you advise on a JavaScript solution which does not involve measuring the offset values, setting the heigh/width and then subtracting the difference?

Thanks in advance!

Answer 1

This is a jQuery solution for your problem.

$(document).ready(function() {
    border_left = parseInt($("#inner").css("borderLeftWidth"), 10);
    border_right = parseInt($("#inner").css("borderRightWidth"), 10);
    border_top = parseInt($("#inner").css("borderTopWidth"), 10);
    border_bottom = parseInt($("#inner").css("borderBottomWidth"), 10);

    width = $("#outer").width() - (border_left + border_right);
    height = $("#outer").width() - (border_top + border_bottom);

    $("#inner").width(width);
    $("#inner").height(height);
});

Cheers...