The difference in rendering between 3.0 and 3.5. Bug or feature?

The other day, the client writes to me, they say, the logo drifted away on the site. I ask which browser? Firefox says. I'm testing this way and that - everything is fine with me. I think maybe he has a Fire Fox 2.x, but no - 3.0 with something. I have installed not very fresh 3.5.

So the strange phenomenon of various rendering of "floating" divs with float and the subsequent positioning relative in Firefox 3.5 and 3.0 was found. You can see the difference in the pictures below. Code one, the result is different.




')
At the request of the guys from @nzwebdev, I created a test page that demonstrates this effect. Below is an explanation for those who can not see the source.

A page consists of two identical containers, described as follows. The presence of the border and the background color does not affect the appearance of bagofichi.

.content {
background-color: #eee;
border: solid 1px #ccc;
margin-bottom: 5em;
/* padding >= 3em */
/* padding: 3em; */
}

Each container contains text and another container, described as follows:

div.logo_and_caption {
background-color: #ccc;
border: solid 1px #ddd;
float: right;
position: relative;
top: -1.5em;
}

The second div is floating. It is assumed that it should shift to the right, and the text should flow around it to the left. It turned out that browsers give different results if the floating div is placed after the text. In the second container, the div with the logo_and_caption class, as you can see in the illustrations, remains in place.

It's interesting that adding padding to an external container fixes the problem.

I hope this will help someone in the fight against the magical movements of objects on the page. Thank.