Instead of using a background color, use a background image instead. It turns out that a repeated background image works just as well to give the anchor its proper size. So I’ve created a 1×1 transparent gif and set that as the anchor’s background in my CSS. The close button now works. I’ll get the example updated right away, and then update the tutorial soon.

The problem is, IE7 ignores the size you specify on a link if the content (text, image, whatever) doesn’t take up all the space you’ve given it. And because we’ve set a “display: none” on the content, IE7 can’t find anything to click on. Never mind the fact we’re in “display: block” mode with a specified width and height.

However, as you pointed out, setting a background color makes it respect the size of our box. Of course, that also obscures our close button.

We have two options: first, we could just cut the close button out of our ad design, create it as a separate image, and put that in our close anchor. The anchor would be clickable, because it was filled with the image.

Or two, you can set a background color on the anchor tag, and then HIDE that color by setting its opacity to zero. IE7 still respects our size for whatever reason. Unfortunately, there seems to be an opacity bug in IE6 wherein the opacity filter doesn’t take into account positioned elements: the close button becomes transparent all the way down to the document underneath. So if you need IE6 support, this isn’t the best option. But it works elsewhere.

Here’s the deal: Opera respects the negative margin we give the ad initially, and it respects the new margin fed to it by jQuery’s animation function as long as the ad is moving. But when jQuery sends it the final left margin of “0,” Opera seems to get confused and reverts back to the original margin of -300, effectively hiding the close button behind the cap and off the edge of the page.

However, we’ve found a pretty easy fix. In the CSS, instead of positioning the close button against the right side of our ad with a “right: 0″ rule, we can put it into place with a “left” rule instead, pushing it away from the left side. I’m not sure why this prevents the bug from triggering, but it seems to do the trick. I’ve already updated the examples to the new CSS, and I’ll update part 1 of the article to explain the bug and the fix.

You can also fix this in the jQuery, but it’s less of an elegant solution. I’ve found that, if the animation’s margin never hits zero, the bug is never triggered. So in the openAd function, if you stop the animation at “-1px” instead of at “0″, the bug isn’t triggered. But then you have the leftmost edge of your ad hidden at all times, and that bothers me, which is why I’m opting for the CSS workaround.