July 23, 2009 at 05:31The difference in rendering is between 3.0 and 3.5. Bug or feature?
The other day a client writes to me, they say, the logo has sailed 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 fiery fox 2.x, but no - 3.0 with something. My installed is not very fresh 3.5.
So, a strange phenomenon was discovered of various rendering of “floating” divs with float and subsequent positioning relative in Firefox 3.5 and 3.0. You can see the difference in the pictures below. The code is one, the result is different.
At the request of the guys from @nzwebdev, I created a test page showing this effect. Below are explanations for those who can not look in the source.
The page consists of two identical containers, described as follows. The presence of border and background color does not affect the appearance of bagofichi. Each container contains text and another container, described as follows: The second div is floating. It is assumed that it should shift to the right, and the text should flow around it on 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 its place. Interestingly, adding padding to an external container fixes the problem. I hope this helps someone in the fight against the magical movements of objects on the page. Thanks.
So, a strange phenomenon was discovered of various rendering of “floating” divs with float and subsequent positioning relative in Firefox 3.5 and 3.0. You can see the difference in the pictures below. The code is one, the result is different.
At the request of the guys from @nzwebdev, I created a test page showing this effect. Below are explanations for those who can not look in the source.
The page consists of two identical containers, described as follows. The presence of border and background color does not affect the appearance of bagofichi. Each container contains text and another container, described as follows: The second div is floating. It is assumed that it should shift to the right, and the text should flow around it on 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 its place. Interestingly, adding padding to an external container fixes the problem. I hope this helps someone in the fight against the magical movements of objects on the page. Thanks.
.content {
background-color: #eee;
border: solid 1px #ccc;
margin-bottom: 5em;
/* Добавление контейнеру padding >= 3em нивелирует проблему */
/* padding: 3em; */
}div.logo_and_caption {
background-color: #ccc;
border: solid 1px #ddd;
float: right;
position: relative;
top: -1.5em;
}