CODEWITHSUNDEEP
htmlcssfirefoxcross-browsercss-position
dsp_099
dsp_099

Reputation: 6121

Firefox: How to absolutely position a div inside a td

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?

Upvotes: 0

Views: 2389

Answers (2)

Steven Deeds
Steven Deeds

Reputation: 21

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.

Upvotes: 0

Lie Ryan
Lie Ryan

Reputation: 64913

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

Upvotes: 1

Related Questions