Margin 12px for IE7 + Firefox, but need 6px for IE6?

[scooter41]

I am just in the process of designing a layout, and have come across an element that lines up perfectly with a margin of 12px on IE 7 and Firefox, yet is way off in IE6, and needs a margin of 6px for IE6 ... I always thought pixels would be rendered the same across browsers but obviously not!

 

I know its possible to do with a javascript browser detection, and then perhaps writing some JS to call another stylesheet or write it inline, but is there anyway more elegant that could perhaps be written in the CSS

 

If browser is IE6,

 

margin-left:6px

 

else

 

margin-left:12px

 

 

that sort of thing?

 

Thanks for any help in advance

 

Scott

[calabiyau]

Look up "internet explorer conditional statements" and you can feed specific css to IE.

[Anzeo]

IE6 tends to double margins (especially from floating elements). Make use of the conditional statements, as mentioned above, and you can write diffrent CSS for IE6.

 

Good luck with it!

[bronzemonkey]

IE6 has a "double margin bug". For example:

 

#myelement1 {float:left; margin-left:10px;}
#myelement2 {float:right; margin-right:10px;}

 

Both examples will result in a doubling of the margin in IE6 because you've got a margin on the same side as the direction that the element is floated.

 

It is easy to fix by adding {display:inline;} to your code for the element that is experiencing the problem.

 

All other browsers will ignore the declaration because a floated element is always displayed as a block (even in IE6 when you use this declaration). However, it is probably best to put this into a conditional stylesheet targeting only IE6 in order to properly separate all the IE-specific pieces of code from the code that is purely standards orientated.

[zang8027]

IE conditional statement

 

 

best way to go

[ToonMariner]

indeed conditional comments to have ie use a style sheet that will make it work are the way to go.  Here is an article that relates directly to your issue...

 

http://www.positioniseverything.net/explorer/doubled-margin.html

[scooter41]

perfect! mananged to sort with conditionals! Thanks