Issue with CSS Margins that only happens on first load

Posted on 2011-05-08
Last Modified: 2012-05-11
I am having an odd CSS issue, which happens in both Firefox and IE the first time you visit the page. It only happens sometimes, but if you go to this link:

The first time you go, the margin will be off at the top.  But if you hit refresh, then it renders correctly. Since it doesn't always happen, I attached the screenshot with the incorrect rendering on top, and then how it looks once you hit refresh on the bottom.

Any assistance on why this would be happening would be greatly appreciated!
Question by:manicdiggity
    LVL 18

    Accepted Solution

    The google ads div is throwing it off: < div id="google_ads_div_wi-fullpage-pops_ad_container" >

    In your stylesheet, add:

    #google_ads_div_wi-fullpage-pops_ad_container { height:0px;padding:0px;margin:0px; }


    I used firebug to inspect the element that was causing it:


    Author Closing Comment

    Thanks, that was it!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now