|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:
<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"
(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,