Fractured page layout on 64-bit Firefox 30
After upgrading to Firefox 30, one of my websites isn't rendering properly.
I'm running two almost identical dotnetnuke sites (http://www.drawingworkshop.com/ , http://arthouse.tc/arthouse/ ) with the same host. Drawingworkshop.com will not render properly in Firefox 30 on 64-bit Vista, but arthouse.tc is OK. Trying to track down the problem, I called the host (godaddy), and the guy I talked to was able to see the problem on his browser; I don't know what system he was using. It looks like a style sheet issue, so I installed the stylesheet from arthouse.tc into the drawingworkshop site, and still no go. The site works fine in IE, Chrome, Safari, and on my android phone. Many of my visitors use Firefox, so I need to find a website fix that will allow them to see the site properly. Thanks.
Chosen solution
The console was helpful and interesting; thanks. I identified the problem as Firefox 30 was adding 40 pixels or so of space above the ads, which was pushing the rest of the layout around, very conspicuously in the case of drawingworkshop.com. I did a bunch of troubleshooting and found the culprit:
- dnn_TopBanners a {
margin-left:1px; margin-right:1px; margin-top:0px; margin-bottom:0px; }
I put this in the original stylesheet to fix an inconsistency in which one browser's rendering of the banner didn't match the others'. I zeroed the margins and padding and it looks fine now. Evidently the anchor tags were putting the squeeze on the ad content and causing it to jump a line within the link. There was plenty of width in the topbanner div for the ads; it may be that Firefox 30 couldn't stretch the link to accommodate a margin. Thanks for the help!
Read this answer in context 👍 0All Replies (4)
Maybe you use/clear floats differently in #dnn_TopBanners on the two pages?
#MainSection {clear:both;}
helps.
You may also want to review the issues in the Browser Console for that page.
Ctrl+Shift+j will open it up, the I suggest clicking the Clear button and reloading your page to get a fresh error list.
I'll check it out. Thanks!
Chosen Solution
The console was helpful and interesting; thanks. I identified the problem as Firefox 30 was adding 40 pixels or so of space above the ads, which was pushing the rest of the layout around, very conspicuously in the case of drawingworkshop.com. I did a bunch of troubleshooting and found the culprit:
- dnn_TopBanners a {
margin-left:1px; margin-right:1px; margin-top:0px; margin-bottom:0px; }
I put this in the original stylesheet to fix an inconsistency in which one browser's rendering of the banner didn't match the others'. I zeroed the margins and padding and it looks fine now. Evidently the anchor tags were putting the squeeze on the ad content and causing it to jump a line within the link. There was plenty of width in the topbanner div for the ads; it may be that Firefox 30 couldn't stretch the link to accommodate a margin. Thanks for the help!