facebook twitter youtube
by Amit Gupta - no comments

Have you ever faced problem related to your website appearance?

I went through this fix when my sister developed a site for a client. That site was coming properly in IE7 and Firefox. But it is messed up in IE 5.5, 6.
Floats & margins ever create appearance problem in IE. Luckily IE 7 is free from this till some extension.
Review the below code and its display in IE6 and in firefox, IE 7 and Epic. You’ll find that IE double the margin.

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  display: inline;
  }

In IE6


margin problem in IE

In Firefox & IE7


margin fix in IE7 & other browsers

Solution

Possible solution for the same is either you use padding instead of margin. But it is not possible all time. Another solution is to use padding and margin with some mathematics calculation such as left margin & right margin adjust both.
To read more about it and to fix it read The IE5/6 Doubled Float-Margin Bug. To understand concepts of floats read fix for floating div. You might need CSS compatibility charts to understand computability issues with other browsers.

I compiled above screen shot using some online tools since I was not having IE6 installed on my machine.

Amit Gupta

Hey! this is Amit Gupta (amty). By profession, I am a Software Eng. And teaching is my passion. Sometimes I am a teacher, as you can see many technical tutorials on my site, sometimes I am a poet, And sometime just a friend of friends...

Leave a Reply

captcha