CSS Positioning > Google Adsense

Geoff Millikan
Geoff Millikan used Ask the Experts™
on
The page at the link be shows Google ads just fine in Firefox 4 but IE9, Chrome, Opera don't display/render the ads (although the Adsense scrips are being downloaded in each of these browsers).  What are we doing wrong?

http://www.zipcodetable.com/
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
When I save it and run it locally, your ads are visible. When I view your live site they are not. I'm using Firefox 3 by the way, so unfortunately we can add that one to the list.

Try commenting out everything on the page that is not relevant. Strip it down to just what you need for the ads to run. Verify that the ads run, then start turning elements back on, one by one until something breaks.

Commented:
Before you do anything, try a different doctype. See if it works with an html4 DocType:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Top Expert 2015

Commented:
Looks like it's fixed.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I really want it to work in HTML5 if I can but I'll try the more normal doctype.  I know the ads are loading on all the browsers, it's just that the center DIV is laying on top of all the other DIV's on the left and right.

I could use z-index but that's got other problems.

Give me a few hours here.  

Thanks in advance.

Author

Commented:
Per link below, I changed it over to HTML 4.01 Transitional and it certifies as error-free and still, the center DIV is on top of all the other DIV's on the page.   Dang.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.zipcodetable.com%2F

Author

Commented:
I tried it in simplified HTML and it works fine (see attached HTML below).  I'm starting to wonder if this issue has something to do with the iframes Google is using with their advertising (see link below).

http://adsense.blogspot.com/2011/03/making-web-faster-for-all-adsense-for.html

<html>
<body>
<div style="position:absolute;top:0px;left:0px;width:160px;background-color:#FFF; border-top: 1px none #FFF;border-right: 1px none #FFF;border-left: 1px solid #FFF;border-bottom:1px solid #FFF;">
Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 
</div>
<div style="background-color:#FFF; vertical-align:top;margin:0px 162px 0px 162px; min-width:300px;">
Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 
        <div style="position: relative;text-align:left;padding-bottom: 64px;">
            sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 sub-column 2 
        </div>  
</div>
<div style="position:absolute;top:0px;right:0px;width:160px;background-color:#FFF; border-top: 1px none #FFF;border-right: 1px none #FFF;border-left: 1px solid #FFF;border-bottom:1px solid #FFF;">
Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 
</div>
<div id=footer style="width:728px;margin:0px 162px 0px 162px;margin-left:auto; margin-right:auto;text-align:middle;">
Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer 
</div>
</body>

Open in new window

Author

Commented:
Dang it, yep, that's it.  I removed the JavaScript and put dummy data in its place and the dummy data shows up just fine.

How do I get around this???????????
Brutal.

The issue was that we were putting the cursor into the form using the document.focus() before all the scripts were done running.  That shouldn't have broken Google's AdSense ads (no errors thrown in Firebug JS debugger) but it did.

Only about 10 hours of debugging on that one.

Brutal.

Author

Commented:
Yuck.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial