Right floated element in Internet Explorer 8 is positioned differently than Internet Explorer 7

Hi everyone!

Here is behavior difference between IE8 and IE7 that we’ve come across.  Hopefully will provide some good insight for anyone seeing this behavior today…

Right floated elements render differently in Internet Explorer 8 compared to how other browsers including Internet Explorer 7 render. To demonstrate the differences let us see how the following html rendered in IE7 and IE8:

<!DOCTYPE html>

<html>

<head><title>Scratch page</title></head>

<body>

<br clear="all" /><br clear="all" />

<div style='width:230px;background-color: silver'>

Some short text

<span style='float:right; background-color: Yellow;'>

style='float:right'

</span>

</div>

</body>

</html>

IE7:

clip_image002

IE8:

 clip_image004

The way Internet Explorer 8 is now displaying as per the css2.1 standards. So if one wanted to make IE7 display how it appears in IE8, one may have introduced negative margin on the right floated element. This modified html looks fine in IE7 but will break when rendered in IE8 standards mode as shown below

<span style='float:right; background-color: Yellow;margin-top:-19px;'>

style='float:right'

</span>

IE7:

clip_image006

IE8:

 clip_image008

One way to solve this issue would be to set the compatibility mode. You can find more information about this here.

You may also modify your html to the following

<span style='float:left;'>

Some short text

</span>

<span style='float:right; background-color: Yellow;'>

style='float:right'

</span><br clear="both" />

IE7:

clip_image010

IE8:

 clip_image012

Note:   You may have to build up on the above modified html to fit your needs.

This blog post was provided by Bhasker Konakanchi. A Senior Support Escalation Engineer on the IE Support Team.

Regards,

The IE Support Team