Friday, 14 October 2005

IE, Floats and Negative Margins

A couple of months ago, I realised I had a problem with my floated figures when viewed on Internet Explorer. One of the aspects of travelling and using Internet cafes is that you invariably end up using IE. As a result, I have just realised why my figures disappear.

Because of the way I float out figures using a negative margin, they are positionned outside the main colum and thus outside the display box of that column. IE assumes that once you have a box everything is in the box unless positionned absolutely. As a result, everything that is out of the box for any reason is cropped along the limits of said box. This happens in situations like this one where you have figures that are floated left with a negative margin or italics or cursive fonts like Zapfino where characters intentionally take more space than their display box. Now the whole reason why I used this way of floating figures was because I wanted the margin of the main column to be simple, because of IE's weird behaviour with margins on floated elements and non-standard way of handling padding and margin together. So by trying to avoid an IE bug, I triggered another one.

So what is the solution then? Well, I'll think about it when I'm back from holidays. It will probably involve some CSS hacks to make IE see something while other standard compliant browsers see the style sheet as it is now. At this point in time, a phrase including Microsoft and a string of very rude words comes to mind.

Post a Comment