Positioning text over image, works with IE but not Firefox

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

re: Positioning text over image, works with IE but not Firefox

Jason wrote:
<centeris obsolete in the face of CSS.
<spanelemnts cannot contain <tableelements in HTML. Things break when
the markup doesn't make sense. http://validator.w3.org/
Or you could just twiddle the margins (once fixing the syntax errors)

--
David Dorward <http://blog.dorward.me.uk/ <http://dorward.me.uk/>
Home is where the ~/.bashrc is

re: Positioning text over image, works with IE but not Firefox

<centeris obsolete in the face of CSS.

Of course, but as I said I'm making sure that the site works for older
browsers, too.
Using W3.org, the page validates. It does throw flags on a different
section of the page (it doesn't like having whitespace in links), but
that's not relevant to this section. And just to be safe, I removed
that altogether, and it had no impact on the positioning.

Just to be certain, I tried a test page with 2 images (no tables), and
had the exact same results (perfect in IE, not in FF). This is the code
I tried for the test page:

<center>
<span style="position: relative; top: 0px; left: 0px">
<img src="images/0.jpg" width="555" height="294" border="0">

<span style="position: absolute; left: 0px; top: 75px">
<img src="images/1.jpg" width="235" height="65" border="0">
</span>
</span>
</center>
Since it looks right on IE, and just not on FF, I'm not sure how I
could twiddle the margins. This is obviously an error in the CSS code,
I just don't know what that error is.

- Jason

re: Positioning text over image, works with IE but not Firefox

Jason wrote:
Netscape 4 is likely to break when it comes near any CSS. So you're
seriously putting effort to getting this work in browsers of the IE 3 / NS
3 era?
*boggle*

GoogleGroups is showing rather different code to that seen in my regular
newsreader.

http://groups.google.com/group/comp....da5b2ec4a6f508
Try using blocks (div elements or by altering the value of the display
property). I don't know if it will work, but its probably worth a shot.

(Incidently, its rather easier to try to debug code given a webpage rather
then an HTML fragment - aside from anything else people can fire it up in a
browser and then modify it with DOM inspector - a lot less effort then
constructing a test page).

--
David Dorward <http://blog.dorward.me.uk/ <http://dorward.me.uk/>
Home is where the ~/.bashrc is