Positioning text over image, works with IE but not Firefox

Giganews Newsgroups
Subject: Positioning text over image, works with IE but not Firefox
Posted by:  Jason (jwcarlt…@gmail.com)
Date: 17 Aug 2006

I don't usually use CSS positioning very much, but I thought that I
understood the concept until I got into this one.

The site is using a mixture of tables and CSS (to make sure it works
well on older browsers; CSS is mainly used for fine-tuning), and I'm
trying to get an image to overlap a table. The main table is centered
on the screen, though.

Here's the simplified layout that I'm using:

<center>
<span id="container" style="position: relative; top: 0px; left: 0px">
  <table width="750"><tr height="200"><td>Some text</td></tr></table>

  <span style="position: absolute; top: 75px; left: 0px">
    <img id="element" src="image.jpg" width="200" height="50"
border="0">
  </span>
</span>
</center>

(I typed in the IDs for your benefit, so that I can refer to them more
easily; I actually don't use them on the site)

Now, because I've nested the two, I thought that the absolute position
of "element" would be in relation to "container"; meaning, it would
show up 75px down from the 0px of "container."

In IE, this works correctly, but in FF and Safari, it's not. The top:
75px seems to work correctly, but instead of being on the left margin
of "container," it seems to be centered over it (the top-left corner of
"element" is positioned at 375px of "container").

It's worth mentioning that I'm using absolute positioning so that it
doesn't leave a blank space after "container."

Any idea what I'm overlooking? TIA,

Jason

Replies