Trouble with aligning in IE

[mark_W]

I have been playing around with this layout!

I have not done much in CSS and was wandering if someone could explain why its positioned where it should be in firefox but not in IE?

Thanks

[Paul O'B]

Hi,

Ie has a double margin bug on the side of a float nearest the windows edge or its parent containers edge and the margin on that side gets doubled.

The fix is to ad display-inline to the offending element and causes ie to render the correct margin (for some unaccountable reason).

The display-inline is totally safe because floats are block level by default and cannot be changed by css. Therefore other browsers that understand the specs ignore the display:inline.

#contentbox1{
 background-image: url('http://www.protemplates.ws/blog/images/blog.gif');
 background-repeat: no-repeat;
 float: left;
 padding-left: 2px;
 width: 160px;
 height: 253px;
 color: #CCC;
 text-align: justify;
 font-family: verdana;
 font-size: 0.8em;
 margin-left: 10px;
 margin-right: 16px;
 display:inline;
}

Hope that helps.

Paul

[mark_W]

Thanks Paul, Brilliantly put

Makes sense now!

Cheers!