Question

I’m working on a sort of an ad replacer script. Sometimes advertisements appear inside of tags like this:

<tr>
  <td align="right" width="40%"><a><img src="ad.jpg"></a></td>
  <td>123</td>
</tr>

The kicker is that I can’t change the display values of the ad; for the purposes of this exercise I have to overlay it with an opaque div which needs to be absolutely positioned as well as inherit margins and floats and that sort of thing.

When an ad is found inside of a div and happens to be floated left or right, positioning a div over it with the appropriate left:0; or right:0; css attributes is pretty easy. However when the ad is styled by a td, it appears that Firefox doesn’t render it quite right, even if the td is appended a position:relative; style.

Here’s what it looks like in Chrome\IE:
(the grey cell is the first td, the red is the overlay, the inner borderless cell is an iframe that is to be overlayed – you can’t see it very well because it’s being overlayed 🙂 )

Here’s what it looks like in Firefox:

The code for the overlay is really simple…

<div style="right:0;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;position:absolute;z-index:9999;background:red;width:300px;height:280px;"></div>

… and it’s being prepended to the td in question.

The right:0; property is making it shoot all the way out from inside the td even though it’s been ordered to be relatively positioned.

What am I missing here?

Answer 1

You can add a position:relative wrapper div, like in the following fiddle: http://jsfiddle.net/qfquj/