div absolute positioning not working in Firefox?

Hi,

I have a very silly simple page that displays correctly in IE but not in Firefox.  I'm hoping someone can pick up some quick points and point out what's wrong.

What I want to do is place two consecutive images on top of each other, then move down the page and do it again, etc.  Here's a sample:

<html>
<body>
<div style="position: absolute; left=0px; top=10px; width='100%'">
<table cellpadding=0 cellspacing=0 border=0 width="100%" align=center>
<tr>
<td align=center>
<img src="<image 1A>" border=0 alt=""/>
</td>
</tr>
</table>
</div>
<div style="position: absolute; left=0px; top=10px; width='100%'">
<table cellpadding=0 cellspacing=0 border=0 width="100%" align=center>
<tr>
<td align=center>
<img src="<image 1B>" border=0 alt=""/>
</td>
</tr>
</table>
</div>
<div style="position: absolute; left=0px; top=500px; width='100%'">
<table cellpadding=0 cellspacing=0 border=0 width="100%" align=center>
<tr>
<td align=center>
<img src="<image 2A>" border=0 alt=""/>
</td>
</tr>
</table>
</div>
<div style="position: absolute; left=0px; top=500px; width='100%'">
<table cellpadding=0 cellspacing=0 border=0 width="100%" align=center>
<tr>
<td align=center>
<img src="<image 2B>" border=0 alt=""/>
</td>
</tr>
</table>
</div>
</body>
</html>

In IE this displays fine, but in Firefox *all* the images wind up in the same space - on top of the first set.  I tried playing with a z-index but taht didn't seem to help.

Any thoughts?  I'm sure this is an easy one for someone... thanks!
TruthHunterAsked:
Who is Participating?
 
GrandSchtroumpfConnect With a Mentor Commented:
> I tried "align: center" styles on the <div>
You need "text-align: center":

<div style="text-align: center; position: absolute; left: 0px; top: 10px; width: 100%">
<img src="image.png">
</div>
0
 
GrandSchtroumpfCommented:
change these:

<div style="position: absolute; left=0px; top=10px; width='100%'">
<div style="position: absolute; left=0px; top=500px; width='100%'">

to these:

<div style="position: absolute; left: 0px; top: 10px; width: 100%">
<div style="position: absolute; left: 0px; top: 500px; width: 100%">


And why do you need to place your images inside tables?
0
 
TruthHunterAuthor Commented:
Duh - I knew it was something obvious.  You can stare at something forever and still miss it.  Thanks a bunch.

I was using tables because I want the images centered on the page.  I tried "align: center" styles on the <div> and <img> tags, but that didn't work.  Something else obvious that I missed?

Thanks again...
0
 
TruthHunterAuthor Commented:
Hi GrandSchtroumpf,

Thanks - that, plus taking the quotes off the '100%' finally made things work!

The final, much-simplified file (in case anyone else might care):

<html>
<body>
<div style="position: absolute; left: 0px; top: 10px; width: 100%; text-align: center">
<img src="<img1A>" border=0 alt=""/>
</div>
<div style="position: absolute; left: 0px; top: 10px; width: 100%; text-align: center">
<img src="<img1B>" border=0 alt=""/>
</div>
<div style="position: absolute; left: 0px; top: 1057px; width: 100%; text-align: center">
<img src="<img2A>" border=0 alt=""/>
</div>
<div style="position: absolute; left: 0px; top: 1057px; width: 100%; text-align: center">
<img src="<img2B>" border=0 alt=""/>
</div>
<div style="position: absolute; left: 0px; top: 2104px; width: 100%; text-align: center">
<img src="<img3A>" border=0 alt=""/>
</div>
<div style="position: absolute; left: 0px; top: 2104px; width: 100%; text-align: center">
<img src="<img3B>" border=0 alt=""/>
</div>
</body>
</html>

Thanks very much again!
0
 
GrandSchtroumpfCommented:
cheers
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.