FireFox 1.5 and CSS issues

When creating my own controls I saw a marked difference in the display of my objects between FireFox and IE. I tracked it down to the .aw-system-control class. What is happenning is that DIVS are not flowing one after another, they are stacking up on top of each other. I was able to have a workaround (at least it fits the bill for me but might not for everyone else) by creating a new class for System and assigning it to all my objects. I gave the class a new name to replace the system-control class they would normally get assigned. Alex can correct me if I am wrong here, but you can only have one class per object with the same first 2 identifiers. That would mean that if I do setClass("system", "control2") it would replace .aw-system.control with .aw-system-control2 and that seems to correct my issues. I'm not exactly sure which class identifier is the final culprit, but here is my new CSS class that seems to keep the look between the 2 browsers the same:

.aw-system-control2 { 
   box-sizing: border-box; 
   -moz-box-sizing: border-box; 
};

Alex might be alble to shed more light on this.

Jim,

Firefox uses broken box model by default (it is also sometimes called 'standards-compliant' or 'content-box') - it does not include padding and border into width/height values. This rule switches firefox to the same box model ('border-box') as IE6 in quirks mode:

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

I am also using this rule but I only apply it to .aw-system-control class to avoid changing behavior of the rest of the page.

I have this at the top of my page. The only way I was able to get the page to format properly was to do what I did above. The size of the objects haven't been an issue since I added the style to my page, it was their position. When I had 3 DIVs in a row, they did not flow one after another, they displayed on top of each other. Removing the aw-system-control from the loop allow them to flow properly (and I still have the -moz-box-sizing class assigned to the page).