User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:22.214.171.124) Gecko/20080311 Firefox/126.96.36.199 Build Identifier: Mozilla/5.0 (Windows ows NT 5.1; en-US; rv:188.8.131.52) Gecko/20080311 Firefox/184.108.40.206 FF3 shows the advert falling below FF2, IE6+ show the page complete http://kizn-fm.fimc.net/ Reproducible: Always Steps to Reproduce: 1. Go to site in FF2 2. Go to site in FF3 3. Expected Results: FF3 should handle the CSS the same
The difference is that #contentContainer ends up with a content width of 768px in Fx3 and 773px in Fx2. This is enough to fit the first two floats (yellow and lime) on the first line. To fit #cubeAd on the 2nd line we would need #video:227px + padding:5px + #tuneGenie:236px + padding:5px + #cubeAd:300px = 773px, which fits exactly in Fx2, but not in Fx3. So, why is #contentContainer sized too small in Fx3? (it's a width:auto float, so it's "shrink-to-fit") http://www.w3.org/TR/CSS21/visudet.html#float-width The outer-most container #frameworkLeft (red) has 792px and its child #contentContainer has horizontal padding of 19px, thus 773px is the "available width" for the content. The difference seems to be in how we calculate the preferred width in Fx2/Fx3. IIRC, in Fx2 we reflow the content with an unconstrained width to figure out the preferred width, which correctly results in 773px. In Fx3 we ask each block its preferred width without reflowing, which does not take into account how floats in different blocks potentially could stack up against each other.
Created attachment 8730161 [details] FF2vsFF45tc2.png Hi, User Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:45.0) Gecko/20100101 Firefox/45.0 This issue is still reproducible on the latest Firefox release (45 Build ID 20160303134406) and on the latest Nightly (48.0a1 Build ID 20160313030418). I've added a screenshot of how FF2 handles this versus FF45. IE seems to be the only browser to handle this right. Thanks, Cipri
2 years ago