I will keep saying it lol I might make a macro actually...
You need to use "position" to position block elements and not margin/padding.
for example, within positioning :
margin-top:20px; margin-left:20px;
should be:
position:absolute/relative; /*absolute is a better option */ top:20px; left:20px;
IE decides its going to make up its own rules in regaurds to margin and padding, that is why people see such a shift in their designs when position is not used
Reducing the margins doesn't seem to help the problem in IE. Is it because I have more than one flash element on the page? Without these elements, all the DIVs align perfectly, but as soon as a second SWF is embedded (either with adobe or SWFObject) the divs move out of position :(
Its very frustrating! Any further thoughts or ideas guys?
There's a bug in IE6 that causes it to double the margins on floated elements. So if you have this:
div { float: left; margin-left: 20px; }
IE will actually assign "margin-left: 40px" to the div. Unbelievable, right?
The fix is equally as ridiculous (although easy). Just add "display: inline":
div { display: inline; float: left; margin-left: 20px; }
"Display: inline" actually doesn't even do anything, because floating something automatically makes it block-level. But, for whatever messed up reason, it fixes the margin doubling in IE! So there you go.
Otherwise just create a stylesheet targeting IE and reduce the margins in that.
If you are embeding Flash in your pages you should really be usiing swfobject http://code.google.com/p/swfobject/
You need to use "position" to position block elements and not margin/padding.
for example, within positioning :
margin-top:20px;
margin-left:20px;
should be:
position:absolute/relative; /*absolute is a better option */
top:20px;
left:20px;
IE decides its going to make up its own rules in regaurds to margin and padding, that is why people see such a shift in their designs when position is not used
Reducing the margins doesn't seem to help the problem in IE. Is it because I have more than one flash element on the page? Without these elements, all the DIVs align perfectly, but as soon as a second SWF is embedded (either with adobe or SWFObject) the divs move out of position :(
Its very frustrating! Any further thoughts or ideas guys?
Have you tried Robski's absolute positioning?
You could try changing the margins to padding instead.
Obviously not.
div {float: left;
margin-left: 20px;
}
IE will actually assign "margin-left: 40px" to the div. Unbelievable, right?
The fix is equally as ridiculous (although easy). Just add "display: inline":
div {display: inline;
float: left;
margin-left: 20px;
}
"Display: inline" actually doesn't even do anything, because floating something automatically makes it block-level. But, for whatever messed up reason, it fixes the margin doubling in IE! So there you go.
Once I started using Eric Meyer's Reset Reloaded, it drastically cut down on browser inconsistencies.