Weird bug. 6 social ads on a page is tooooo much

OK so I have six social ads on a page. It displays fine on Firefox but in IE9 it screws up the whole design. If I take any one of the social ads away it then displays correctly on IE9???

Any ideas?

Cheers

  • ThePath
    • The Bug Hunter

    Oh yeh sorry dude, been so busy. The link is http://honeybeekeeping.co.uk/hives/make-your-own-beehive/

    Ive got 5 ads on it just now as 6 messes it up. Do you want me to put 6 on so you can see the page in IE. Basically it breaks the whole layout, its not centered anymore, it stretches images and punts the sidebar down after the content.

    Excuse the new design, loads of stuff doesnt work at the moment…..Im working on it.

    Cheers

  • ThePath
    • The Bug Hunter

    OK Ive added the extra ad which totally mucks up design.

    Thanks I like to think its the best beekeeping site online, well it will be when Ive finished it. Ive only just rolled out this new design which was inspired by the new design here.

    What popups? For the social ads? Does it use its own way? I use fancybox for images etc.

    Cheers

  • Timothy
    • Chief Pigeon

    Hey there.

    I asked @kimberlyl to take a look in IE9 but she wasn’t seeing a problem and will post a screenshot shortly. :slight_smile:

    So I’m not sure where the issue lays without being able to see it and the code of it happening (view source). Could you provide a screenshot as well please. :slight_smile:

    Take care.

  • ThePath
    • The Bug Hunter

    HI Guys, thank you all for your input.

    Thanks Kim, Im really happy with design, still needs tweaked here and there but like I said I was inspired by this site. Got to instal and style bbPress now get it as cool as here.

    @jason – Yeh I thought about it but why would it be OK for 5 ads but not 6….so disregarded it. I just added clearfix to .entry and it had no affect as suspected.

    One thing I have noticed is that when Im logged in as admin the admin bar isnt there (see my screenshot). Also a point fworth noting is Im using IE9 on Vista…perhaps thats why it differs from Kims. It also crashes my tab quite often when viewing the disrupted page.

    So I was playing with the shortcode classes for ads. the first screenshot is with alignleft and the second is with none.

  • Jason
    • The Incredible Code Injector

    I think with clear fix you need to actually make a new div right before the closing of the last div you want to clear.

    Adding in another js from another provider could import all kinds of strange css glitches sometimes.

    What I believe is happening (which I’ve run into before) is that the height of the main div is set properly, and then javascript overflows it as those sub iframes, etc are loaded slower. Once they load, they increase in height, but the background didn’t “Catch up”

    When this happened to me, I manually added enough padding in my footer to compensate.

    This tends to happen with social widgets in the footers for some reason.

    The page I have that it was happening on it http://leflorecountyjournal.com

    I also noticed that it happens sometimes in articles, but it will go away on it’s own too. So it’s got to have something to do with loading later than other elements.

    (Browse through some articles on that site for a bit, and you may run into one at the bottom of a page. Then just refresh to see what I mean…

  • ThePath
    • The Bug Hunter

    Hi Jason.

    No I dont think clearfix works like that, not my solution anyway:

    .clearfix:before,.clearfix:after{content:"020";display:block;height:0;overflow:hidden;}
    .clearfix:after{clear:both;}
    .clearfix{zoom:1;}

    The :after and :before selectors mean it adds invisible content directly before and after the div element you need to clear. So I really dont think this is the issue but to prove it Im going to add:

    <div style="clear:both;"></div>

    after the social ads in the page. Just did it and no dice Im afraid. There is something else going on here.

    I agree its happening after the styling is in place as initially it displays fine the once all ads load it breaks design.

    But there are some strange factors here:

    1. Its only happening on IE9 (and possibly ealier IE’s) as far as Im aware.

    2. Its only happening after the 6th ad is added.

    3. It loads fine for a milly second and then breaks once the ads load.

    Hah! You know what, Ive just checked in Firebug and I saw that FB.init is loaded twice……from Ultimate FB and comments plus. Weirdly I have the setting not to load FB via comments plus but it still is. Perhaps I need to set it on the network level also….nope that didnt work, Oh well a new ticket for a new problem.

    Anyway de-acivating Ultimate FB solved the page getting screwed up.

  • Jason
    • The Incredible Code Injector

    Nice figuring that out. It was javascript and not css after all…

    What I believe is happening (which I’ve run into before) is that the height of the main div is set properly, and then javascript overflows it as those sub iframes, etc are loaded slower. Once they load, they increase in height, but the background didn’t “Catch up”

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.