Positioning text over image, works with IE but not Firefox
Jason
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
David Dorward
> <center>
<center> is obsolete in the face of CSS.
> <span id="container" style="position: relative; top: 0px; left: 0px">
> <table width="750"><tr height="200"><td>Some text</td></tr></table>
<span> elemnts cannot contain <table> elements in HTML. Things break when
the markup doesn't make sense. http://validator.w3.org/
> It's worth mentioning that I'm using absolute positioning so that it
> doesn't leave a blank space after "container."
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
Jason
Of course, but as I said I'm making sure that the site works for older
browsers, too.
> <span> elemnts cannot contain <table> elements in HTML. Things break when
> the markup doesn't make sense. http://validator.w3.org/
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>
> Or you could just twiddle the margins (once fixing the syntax errors)
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
David Dorward
>> <center> is obsolete in the face of CSS.
>
> Of course, but as I said I'm making sure that the site works for older
> browsers, too.
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?
>> <span> elemnts cannot contain <table> elements in HTML. Things break when
>> the markup doesn't make sense. http://validator.w3.org/
>
> Using W3.org, the page validates.
*boggle*
GoogleGroups is showing rather different code to that seen in my regular
newsreader.
> <span style="position: relative; top: 0px; left: 0px">
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).