I have a page with 2 columns. In each column there are self contained modules stacked on top of each other. In IE, as you add more modules to a column, the margins within the module begin to slip (i.e module 1 has 10px margin, module 2 has 8px margin, module 3 has 6px margin). The HTML validates as being correct, no open tags or anything like that. So each module should have no effect on the next one (in theory).
I have attached a zip which demonstrates this. The modules in the example are all exactly the same. Also, the page will have an variable number of modules in each column, so a quick hack of setting different margins as you go down the page is out.
Any suggestions on what is causing this (aside from the obvious IE sucks). Has anybody run into this and figured out how to fix this?If you want IE to work in almost compliant mode, use a strict dtd instead of transitional.Even in strict mode, you still get the margin "slip".Originally posted by NogDog
If you want IE to work in almost compliant mode, use a strict dtd instead of transitional.
All Internet Explorer cares about is the keyword DOCTYPE to flip it into standards mode. Malas, the reason for the slipping borders is probably because IE is botching the height calculation. Try this fix (assuming a few things, but change the code as needed):
.someModule {
/* Code for how you want this to work in all browsers */
}
/* Setting the height to 1 pixel is obviously too short,
but IE-Win will stretch a box if its contents are too
large, and thus IE-Win recalculates the correct
height. Hide from IE5-Mac: \*/
* html .someModule { height: 1px; }
/* End IE5-Mac hiding */
Just make sure you don't have overflow: hidden; in the style declaration for .someModule.
I have attached a zip which demonstrates this. The modules in the example are all exactly the same. Also, the page will have an variable number of modules in each column, so a quick hack of setting different margins as you go down the page is out.
Any suggestions on what is causing this (aside from the obvious IE sucks). Has anybody run into this and figured out how to fix this?If you want IE to work in almost compliant mode, use a strict dtd instead of transitional.Even in strict mode, you still get the margin "slip".Originally posted by NogDog
If you want IE to work in almost compliant mode, use a strict dtd instead of transitional.
All Internet Explorer cares about is the keyword DOCTYPE to flip it into standards mode. Malas, the reason for the slipping borders is probably because IE is botching the height calculation. Try this fix (assuming a few things, but change the code as needed):
.someModule {
/* Code for how you want this to work in all browsers */
}
/* Setting the height to 1 pixel is obviously too short,
but IE-Win will stretch a box if its contents are too
large, and thus IE-Win recalculates the correct
height. Hide from IE5-Mac: \*/
* html .someModule { height: 1px; }
/* End IE5-Mac hiding */
Just make sure you don't have overflow: hidden; in the style declaration for .someModule.