Prevent float drop in IE

Internet Explorer’s propensity to drop floated elements adds time to site development, and sometimes causes a page to appear blank if the floated content drops below the window “fold”. Ignoring the problem and designing only for standards-adhering browsers is not always possible, particularly in enterprise environments where IE (and not always the latest version) is the only officially supported standard. Of course, other browsers are being used as well.

I’ve finally came across a fix that appears to work well cross-platform, thanks to Thierry Koblentz in the YUIblog.

Here’s an example of a set of floated tabs which look fine in Safari, Firefox and Chrome…

… but break badly in Internet Explorer 7.

The HTML for the tabs is shown below. The last tab is highlighted in violet. Each tab is an <li> element, floated in a row. The tabs expand to hold their text labels.

Per the suggested fix on YUIblog, I added an element style to the final tab in the row (highlighted in violet):

style="position:relative;margin-right:-100px"

The resulting view from IE7 shows the tab has popped back into place. Safari, Firefox and Chrome’s rendering of the tabs were all unchanged.