Bleg no. 3 – ads break site layout in FF 3
January 23rd, 2009 by ReinderEarn original art by fixing an HTML problem!
I seem to do nothing on this blog lately but ask readers for help, but that's how it is now. I've switched out some of the Project Wonderful ads for a new ad provider, and ever since, site display has been broken on some pages but not others. In pages like this one, the top ad breaks out of its box in the top right section next to the logo, overlapping the top row of site links and pushing down the rest of the content. The problem only occurs in Firefox 3 (edit) and Internet Explorer, though it is less obviously visible there as the ad just disappears and only on pages using a certain template. Safari and Opera render it correctly; indeed I was working in Safari while changing the templates and didn't notice anything was wrong until 1 AM last night.
What makes this one so annoying is that the HTML code for the top section in those templates is exactly the same as that in the pages that do render correctly, and they pull their positioning code from the same CSS file. Also, I did nothing but switch out one clearly marked block of javascript for another. I spent half an hour counting "Div" tags before passing the problem on to a friendly webdesigner who has more routine and experience fixing problems like this, but told me the next morning she was also stumped. Screenshot
So... if anyone with Firefox 3, a keen eye and a good knowledge of HTML/CSS can help me out with this, I'd be very grateful and send that person an original drawing or page from the archives of their choice..
Tags: CSS, display problems, HTML, Rogues of Clwyd-Rhan, site display
January 23rd, 2009 at 6:42 pm
This is probably a pretty obvious question, but is the leaderboard ad too wide for the space it’s supposed to go in? My thought is that maybe the browsers in which the page shows up correctly squish the image a little bit to make it fit.
Btw, it breaks in SeaMonkey 1.1.14 as well. It renders inconsistently. I load the page one time, and the image drops down a line, is left-aligned, and hides behind the rest of the content, so I can only see the top edge of the ad. I load it again, and the image is still hidden, but is now centered. I load it a few more times, and now it’s dropped 1 line, left-aligned, and visible.
Anyway, I hope your day is going well, and that someone figures this out for you.
January 23rd, 2009 at 7:20 pm
One difference between the cast page and this one ( http://rocr.net/index.php?p=20051108 ) is the right-padding on the div with the id ‘logo’. That might break your width limits.
Reduce to 5px or get rid of it and it will fit (Firebug is your friend
)
January 23rd, 2009 at 9:26 pm
Megan: the leaderboard ad was the same width as the old one and, on the whole, a little less tall because the PRoject Wonderful promo text isn’t underneath it.
Danny: that change may or may not have been introduced by my webdesigner friend. In any case, I’ll investigate it and see if that fixes it for all affected pages.
Thanks, both of you!
January 23rd, 2009 at 9:55 pm
Danny: that seems to fix the problem for FF, but not for IE, in which the top section now looks like it did in FF before.
January 23rd, 2009 at 10:00 pm
And actually, neither removing the padding nor indeed taking out the float property completely make any difference on the templated text pages, such as http://www.rocr.net/index.php?p=about , at all.
January 23rd, 2009 at 10:13 pm
However, adding ‘style=”border:0px;”‘ to the logo image seems to fix it in both IE and FF. Not that Firefox actually displays a border if you leave that out… but it does seem to reserve space for one.