Internet Explorer negative margin bug

Friday, December 17, 2010

I think this is worth mentioning: I spent the better part of today trying to fix a layout bug in Internet Explorer 7, where a negative margin was applied to a floated image container. The image was cut off at the edge of the containing element.

This is actually a well known-bug - in theory - and a reliable fix is to add a “position: relative” CSS rule to the floated container.  But it didn’t work.

After a lot of research and tearing out of hair, followed by careful debugging (aka “wildly flailing about”), I discovered the reason.  The containing element had a Internet Explorer proprietary filter applied to it, to give a semi-transparent fill:

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#59000000, endColorstr=#59000000);
/* For IE 8*/
  -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#59000000, endColorstr=#59000000)”;
border: none;

On removing this, everything worked perfectly.  So I just used a semi-transparent PNG as a fill image instead.  Probably more efficient anyway.