Margin Differences – Internet Explorer and Firefox

Margin Spacing Different in Firefox than Internet Explorer: If you have spent a good amount time messing with CSS, you may have noticed that the margins set for a Class or ID can often preview different in Firefox and Internet Explorer (IE 6 and earlier versions). In most cases the alignment problem will appear if you have margins applied to a floating element. This issue is also known as the IE6 Double Margin Bug. In the following simple solution, I'll show you how to make the margin spacing appear the same in both Firefox and Internet Explorer browsers.

How to make Margins Appear the Same in Firefox and IE

To fix this FF vs IE Margin alignment problem you simply need to add thedisplay:inline; CSS declaration to your floating element.

Example:

.narrowcolumn {
float:right;
padding:0;
margin:0 50px 10px 0;
width:510px;
display:inline;
}

Notice how I added display:inline; to the class .narrowcolumn. This was necessary, because I was using float:right;.