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

Comments (5)

  1. Anonymous says:

    I found this to be a useful article. It would be nice to see how these render in IE6 too.

  2. Anonymous says:

    Perfect. Amazing, how simple, but working. But by the way – on asp.net br should look like this:

    <br clear="all" />

  3. Anonymous says:

    having this very exact issue. thanks for writing!

  4. Anonymous says:

    Why different versions of ie behaves differently? Why do they just make a new version with different rendering of html.

    I have spent lot of time learning the behaviour of each……….

  5. AxelRMSFT says:

    @Naveen Kumar

    Improvements in newer browsers affects the way elements are rendered. In this case, IE8 is now rendering the Right floated as per the css2.1 standards.