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…

Screen shot 2011-09-16 at 1.07.01 PM.jpg

… but break badly in Internet Explorer 7.

Screen shot 2011-09-16 at 1.28.22 PM.jpg

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.

Screen shot 2011-09-16 at 2.12.24 PM.jpg

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

Screen shot 2011-09-16 at 1.21.18 PM.jpg

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.

Screen shot 2011-09-16 at 1.20.29 PM.jpg

Reference