HTML woes: Google/Amazon ads and IE display woes

April 25, 2006 7:38 AM

HTML woes: How can I make Amazon ads play nice with Google ads? Also, why is my web site's layout screwed up in Internet Explorer on Windows? I can't figure it out.

#1 — Starting with this Sesame Street post in the blue, I was able to create an entry on my personal site that has enjoyed very high traffic (for me) over the past week. My Google Ads have worked nicely, but now I want to tack on an Amazon iframe ad in the middle of the entry. When I do, something goes wrong. Where the Amazon ad should appear, half of the Google ad appears, and the regular Google ad doesn't appear where it should at the bottom of the page. I haven't the faintest clue what's wrong. (I've taken the Amazon ad down for the time being, so there's no broken-ness to view; I can re-implement the broken-ness if that will help diagnose the problem.)

#2 — On a similar note, my site doesn't display properly on Internet Explorer for Windows. It's always been a source of embarrassment, but now I'm even more ashamed to have all these new visitors coming to look at Sesame Street videos only to find my broken formatting. Here's a screenshot of how things look on my Mac (and most (all?) Mozilla-based browsers). Here's a screenshot of how things look on Internet Explorer for Windows. I have no idea what is causing the problem. (Well, I suspect it's something in my sidebar, but beyond that I'm clueless.) Can anyone help me diagnose this problem? I've been ignoring it for almost two years.

posted by jdroth to computers & internet (8 comments total)

Re #1, it's a refresh issue with iframes. I've faced the same issue when rejigging the Amazon and AdSense stuff on my sites, and have worked around it by loading /site/index.php instead of /site/ or some other alternative URL. It may not be a problem for anyone other than the site designer: I think you'd have to have cached the original before loading the new page with the added iframe for there to be a problem. I'm also not sure whether this isn't a Safari-only issue.

Re #2, the short (and superficial and unhelpful) answer is that IE renders CSS differently than proper browsers. Welcome to the world of cross-browser testing and workarounds. (Sigh.)
posted by mcwetboy at 7:50 AM on April 25, 2006

An expansion on mcwetboy's #2: You have a LOT of stuff commented out in your CSS file--are these purposeful cross-browser display hacks, or just a result of you changing things and leaving the old bits in as a backup in case you want to switch back?

Either way, I'd peg the problems on that. All that CSS is bound to go wonky if it's not carefully tested, section by section.
posted by bcwinters at 8:02 AM on April 25, 2006

Re #2, look especially for paddings and margins on your divs. The CSS specifications say that the width of a div refers to its content, and that paddings are extra. Firefox honors that. IE does not. So in Firefox a div with a width of 500 px plus 200px total padding will take up 700px onscreen. In IE, that same div will take up 500px and you will have 300 px inside for text.

The same thing happens with borders--the specifications say they are not considered part of the width. In Firefox, a 300-pixel div with 5-pixel borders and 5-pixel padding would be 320 pixels wide; in IE, it will be 300 pixels wide with a 280-pixel width inside for content

Also, if you have margins on floated elements, IE 5.x/win will (incorrectly) double them on whatever side the element is floated to--that is, left-margins on left floats get doubled; right-margins on right-floats do too.
posted by Tuwa at 8:03 AM on April 25, 2006

Thanks, mcwetboy. #1 seems to be solved, leaving only #2 to diagnose. I'll focus on that for now, taking into account the suggstions here.

The commented stuff is just old old bits, bcwinters. I have a bad habit — long-embedded from many years of coding — of never deleting anything, but just commenting out stuff I'm in the process of changing. I'll go through and strip these comments out first thing.

Tuwa, I'll try to sort through your recommendations. I don't deal with CSS often or in-depth (though it doesn't frighten me), so it may take some slogging...

Thanks for the info so far.
posted by jdroth at 8:08 AM on April 25, 2006

http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx
http://www.positioniseverything.net/explorer.html
http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/
posted by flabdablet at 8:11 AM on April 25, 2006

Be careful. This is probably against the Adsense policies you agreed to:

"We do not permit Google ads or search boxes accessing Google search services to be published on web pages that also contain what could be considered competing ads or services. If you have elected to receive contextually-targeted Google ads, this would include all other contextually-targeted ads or links on the same page as Google ads."
posted by smackfu at 8:19 AM on April 25, 2006

Be careful. This is probably against the Adsense policies you agreed to:

Hm. Interesting. What if the ads aren't contextually-targeted? What I did was go through Amazon and find the ASIN for the Muppet Show DVD and paste that in by hand. On the two banner ads, I used "muppet" as one search term and "sesame street" as the other. None of the ads are actually targeting based on info derived from the page.

Does anyone else have experience running both Google and Amazon ads together? Does Google really frown on this?

(The real answer is probably: if Google thinks it competes, they can kick me out of the program...)

Comments removed on CSS. Now trying to track down padding/margin issues.
posted by jdroth at 8:32 AM on April 25, 2006

I've had good luck using this collection of css and js hacks to get things to render the same way in IE and various other browsers. It doesn't take much effort to put in place, so you might want to give it a try and see if it helps.
posted by HiddenInput at 9:37 AM on April 25, 2006