Solved

div absolute positioning not working in Firefox?

Posted on 2006-07-21
5
587 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 500 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Due to recent concerns over the inevitable depletion of the current pool of IPv4 addresses and the desire to provide additional functionality for modern devices, an upgrade to IPv6 on my Internet connection was needed for me to explore the world of …
How many times have you been browsing the internet, with multiple tabs open, and closed the wrong one? Have you ever clicked 'Close all tabs' instead of 'Close current tab' ? Internet Explorer 8 now brings to you, what Firefox has had for a wh…
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.

708 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now