IE9 CSS float:right Bug?

Question

Here are my styles:

Parent container:

div.musicContainer {
        width:820px;
        height:54px;
        margin-bottom:20px;
}

Child containers:

div.hardcorePlayer {
    width:400px;
    float:left;
    border:none;
    background-color:#996600;
}

div.feedbackPlayer {
    width:340px;
    float:right;
    border:none;
    background-color:#996600;
}

The issue is: i installed IE9 yesterday and while IE8 was displaying fine well now the feedbackPlayer div is not lined up to the right boundary any longer. it displays fine in other browsers as before.

is this a IE9 bug?

IE9 image:

other browser image:

thank you very much for your thoughts on this.

website url: www.guygar.com/guygar.html

NOTE: here is the new CSS with the reset data. Have i done something wrong?

Answer 1

Maybe you should try to reset the css so that all browsers start out with the same defaults (like padding, margin ect.)

You can find a css-reset and more information here: http://meyerweb.com/eric/tools/css/reset/

Edit: Related question: https://stackoverflow.com/questions/116754/best-css-reset

Answer 2

This line is in flash.

Change body background to white, and .musicContainer to red. You will see that html is not failing. In my opinion it is a flash like bug.

Try zooming in FF ( I tested in 5.0) on few zooms there is also same gap.