Absolute positioning differs in Mozilla (Firefox)

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I'm having a problem with alignment of an absolutely positioned div. It
works fine in IE but in Firefox the left alignment works but the top
alignment is about 1/2" too low. The code is:

<div style="position: absolute; width: 475px; height: 55px; z-index: 3;
left:250px; top:25px" id="PageHeader">

The div is layered on top of a graphic, which is why I'm trying to position
it this way. Because the graphic remains on multiple pages but the text in
the div changes, I thought this was a good approach. Is there a way to
accomplish this positioning that works for both browsers? (I haven't tested
yet, but I imagine I have the same problem in Netscape.)

Thanks.
 
Show me your page. I'll bet you dollars to donuts that the absolute div is
positioned in exactly the same place in both.
 
Here's your problem -

<td valign="top" colspan="2">
<img border="0" src="../images/spacer.gif" height="85">
<div style="position: absolute; width: 760px; height: 100px; z-index: 2;
left:0px; top:0px" id="banner">

You have placed your absolutely positioned div (i.e., LAYER) inside a table
cell. That is something you must never do. What you are seeing is the
result of having done that.

Since these divs are absolutely positioned, they do not need the 'layout' of
a table cell to position them on the screen. Cut all those divs (only the
ones that are styled with position information) from the table cells and
paste them back onto the page either immediately below the <body> tag, or
immediately above the </body> tag, and you'll be fine.
 
Back
Top