0

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 :) ) enter image description here

Here's what it looks like in Firefox: enter image description here

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?

dsp_099
  • 5,801
  • 17
  • 72
  • 128
  • Can you please provide a [fiddle](http://jsfiddle.net)? – N1ck Jun 10 '12 at 23:49
  • 1
    I don't believe Firefox allows the position property on table-display elements (can't remember for sure), so your `right: 0` is probably being applied to the next non-static ancestor. – animuson Jun 10 '12 at 23:59
  • `position: relative` doesn't really work on table elements: http://stackoverflow.com/questions/7629326/position-relative-in-firefox/7629567#7629567. – thirtydot Jun 11 '12 at 00:51

2 Answers2

1

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

Lie Ryan
  • 62,238
  • 13
  • 100
  • 144
0

You could also possibly set the image as a background-image instead of using an img tag... allowing you to add a div inside of there with a transparency or whatever you want.

Steven Deeds
  • 21
  • 1