A while back I rigged up a little ad server to serve Amazon “ads” to our web sites. I wrote it up so that I could easily reuse it for different projects and have a central location for managing it rather than write the code, duplicate it across projects and then have to maintain it all.

Amazon has an affiliate program which earns you from 4% to 10% commissions on purchases done from traffic you drive to Amazon’s web site. You earn money on sales made during a shopping session that weren’t on the item you linked to, too. Like most affiliate programs, the more you sell in a given month, the higher your percentage commission.

My blogs and the web sites I’m working on are all focussed on particular areas. So, for Apocalypse Blog, I put together a list of apocalyptic media available via Amazon and use my ad server to display a random item on each pageview of the blog.

The problem? I embed the ad by using an HTML iframe to contain it. Unfortunately, its positioning is a bit off. As you may be able to tell, the iframe is shifted down and to the right just a bit.

In my web development I’ve been trying to do things “correctly” - most importantly, I’ve been trying to write correct HTML and to use CSS correctly to do styling. No <center> tags for me; it’s all got to be done through style sheets (and if you for some reason reviewed all the articles in my blogs you’d find many, many places where I didn’t do things correctly).

So, of course, I tried styling the iframe element to set both padding and margin to zero, figuring that would solve the problem. Unfortunately it didn’t change a thing.

I was aware of the marginwidth and marginheight attributes of iframe but having had CSS fail me I thought they would not solve the problem either. Of course, they did. Setting both to zero moved the content of the frame to where it needed to be. Unfortunately not all browsers seem to default to a reasonable (say, “0″) value for these parameters. Safari seemed to but others didn’t.

Also, if you’re using these attributes, be aware that they only take pixel counts as values and not percentages or ems.

Here’s the big issue using CSS to style iframes - the CSS of the containing document is isn’t used at all. It’s only the CSS of the contained document which is used. So you need to make sure that you do all your styling in the contained document. And if it’s hosted by someone else and you can’t control it? Then if you can’t do what you need with the attributes that iframe takes - you’re screwed. The official specification doesn’t seem to get into this at all.

This is the best article I’ve run across on iframes.

[tags]iframe, margin, marginheight, marginwidth, css, ads, amazon, associates, amazon associates, affiliate program[/tags]

|  Print This Post