Anyone fix the FireFox border width issues?

Does anyone have a work around or solution to the border witdh issue with FireFox? Whan you create a new Active.HTML.DIV and give it a border of 2, the DIV actually grows in size by 4. This is not a bug with the ActiveControls as the problem ocurrs when creating DIVs via the DOM as well.

You can test this by creating one DIV and give it a width of 100. Then create 2 SPANs inside this first DIV and give them each a width of 50 and a border of 3 solid outset. The 2 SPANs should be side by side and you can see that they extend past the right of the first DIV (give the first DIV a background color to see it's physical size). They extend past quite a bit. But if you run the same code on IE, the SPANs fit nicely inside the outter DIV. The difference is that IE places the border inside the element and FireFox places it outside the element and increases it's size instead of decreasing it.

I realize that this is not an ActiveControl specific issue but it's one we all will face sooner or later. So has anyone come across an elegant way to handle this?

Thanks

According to the W3C spec, the width of the object is the inner content width - borders and padding are not included. So, a DIV with a width of 100px and a 2px border would have a total width of 104px. So, your inner SPANs are actually totalling 112px, not 100px. This is the correct behavior although this is not how IE implemented its box model.

You can read more here including how to work around it:
http://www.positioniseverything.net/articles/box-model.html

Thanks for the info but this still does not begin to provide any sort of solution to the problem of creating objects on the fly and being able to assign simple widths of, let's say, 50% to them and expect them to display properly. If I create a container DIV then add a DIV to it that is designed to occupy the left half of the container DIV, and I want that div to have a nice border of 2. And I also want a matching DIV that fills the right half of the container DIV, then either the DIVs will overlap or they will extend past the container DIV. You can't provide a width such as "50% - 4px", your mixing metaphors. I tried to first use DIV3.setStyle("width", "50%") and that gave me the rough width I want. Then I applied DIV3.setStyle("width", DIV3.getStyle("width")-4) to remove the room taken up by the border but unfortunately this didn't work because DIV3.getStyle("width") returns "50%" not an actual width in pixels. Is there a property of method of an Active.HTML object that I don't yet know of that might help me solve this issue?

Just to be clear, I really can't use any of the hacks mentioned in the articles because everything I do is created on the fly and I can't use a static CSS to control it's look and feel.

So I guess the only way to do what I want is to never use % and to ALWAYS calculate all widths. What a pain in the butt. There must be a better way.

Jim, the following CSS will switch Mozilla into 'border-box' model, which is compatible with IE:

* {
    -moz-box-sizing: border-box;
}

I am using this for all AW elements except I apply the rule to .gecko selector instead of * (so it does not work on non-AW elements). .gecko selector is appended automatically to all elements which have at least one css class set (not good idea - should apply to all!). This is why you may see the wrong ('standard') box model if you just create clean Active.HTML.DIV