Currently, I am developing a script that replaces ads. At times, advertisements show up inside of <td> tags like the following:
<tr>
<td align="right" width="40%"><a><img src="ad.jpg"></a></td>
<td>123</td>
</tr>
The challenge is that I cannot modify the display properties of the ad. For this project, I must overlay it with an opaque div using absolute positioning while inheriting margins and floats.
If an ad is within a div and floated left or right, positioning a div over it with appropriate css attributes like left:0; or right:0; is relatively simple. However, when the ad is styled by a td, Firefox does not render it correctly even after appending a position:relative; style to the td.
In Chrome/IE, it appears like this: (the grey cell represents the first td, the red denotes the overlay, and the inner borderless cell is an iframe to be overlaid - although it is not visible due to the overlay :) )
In Firefox, it looks different:
The code for the overlay is quite straightforward...
<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 is being added before the specified td.
The issue arises with the right:0; property causing it to extend beyond the boundaries of the td despite setting it as relatively positioned.
What am I overlooking here?