Solved

div absolute positioning not working in Firefox?

Posted on 2006-07-21
5
618 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

After uninstalling Opera browser (for example ver. 10.63), your attempts to open a web page by clicking on a URL link may fail with an error message.  The error is "This operation has been canceled due to restrictions in effect on this computer. Ple…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

733 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