Absolute positioning differs in Mozilla (Firefox)

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.
 
M

Murray

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

Murray

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top