?
Solved

div absolute positioning not working in Firefox?

Posted on 2006-07-21
5
Medium Priority
?
635 Views
Last Modified: 2008-03-17
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!
0
Comment
Question by:TruthHunter
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17153445
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
 

Author Comment

by:TruthHunter
ID: 17163493
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
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 2000 total points
ID: 17163628
> 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
 

Author Comment

by:TruthHunter
ID: 17167908
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17167947
cheers
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Suggested Courses
Course of the Month15 days, 11 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question