Box model challenge - block sizing question

Is this totally impossible cross-browser?

[matthewwithanm]

I've been trying to get this working for hours now and I just can't seem to figure out a solution. I have a block ("outer") whose dimensions are defined in ems. What I need to do is put another block within the first that fills it entirely. The only catch is that the inner element must have borders of 2px.

Such a problem would be a piece of cake if I were coding for the old IE box model but with the standard...I just can't figure it out. What I need is a box whose height (as defined by W3C) is 10em - 4px. (In the old IE box model, it would be 10em tall with a border of 2px.)

Note that I can't use "height: 100%; border: 2px solid;" because 'inner' will then take up more than 10em. (To be specific: 10em + 4px.)

Here's the best I've come up with so far...they're both horribly hacky...

1. Create four divs within 'outer.' Each div has its background set to a single pixel square, on repeat. One div is given the width 100% and height 2px and absolutely positioned top left. This forms a horizontal line that functions as the top border. The other three divs are treated similarly and form the left, right, and bottom borders. Unfortunately (in addition to being a horribly hacked way of doing this), the top and bottom border are displayed incorrectly in IE.

2. Create a table (gasp!) within 'outer.' Set its height and width to 100% and its border to 2px. The problem with this one is that the right border comes up 1 pixel short in Mozilla browsers (FF, NN).

I really hope somebody can help me out with this. I've spent way too much time on it and it's driving me batty. Thanks a lot in advance for any help you can give.

matthew

[drhowarddrfine]

Now I better understand what you are trying to do. Here's something you might get to work but getting it pixel perfect may be a problem.

<div style="width:10em; height:10em; background-color:gray">
<div style="width:9.9em; height:9.9em; margin:1em; border:solid 2px black; background-color:blue;"></div>
</div>

[benihana]

intsead of working with the borders, can you work with the margin, which will achieve what (i think) you are trying to do

[matthewwithanm]

Thanks for the replies guys. However, neither of these quite does the trick. I'm afraid such a thing is just impossible with the standard box model. As far as I can tell, it simply doesn't provide a way to do this (have control over the total height when the border is in different units) like the IE model does. Any solution, I'm afraid, is going to have to be either a compromise or a bit hacky. Like I said, I spent hours on it yesterday and I'm not a complete slouch so I think the solution (if one exists) is going to be a little complicated (or I'll have to give up and do something else).

So come on, people, take this challenge on!