Solved

div absolute positioning not working in Firefox?

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

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…
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
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.
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…

717 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