Layers Not Staying Put In Netscape/Firefox

#1

We are working on a page in Dreamweaver 8. It is made up of several layers,
each positioned absolutely. Right now, I have about six layers on the page,
some on top of others. When I launch the page in IE, it looks just like I want
it to. However, when I launch it in Firefox or Netscape, the very back layer
moves down about 20 pixels and another layer end up moving up probably 15
pixels. Long story short, it doesn't look right. Graphics are running into
graphcis where previously there was some space. I am really new using Layers,
but they were working great when primarily viewing in IE. I need to figure
this out before we proceed. The current situation is not acceptable, in that
those who view the site in Firefox or Netscape are going to get sort of a
jumbled view. Any advice would be greatly appreciated!

mhaddon (AT) utah (DOT) gov

#2

mhaddon wrote:

Quote:

We are working on a page in Dreamweaver 8. It is made up of several layers,
each positioned absolutely. Right now, I have about six layers on the page,
some on top of others. When I launch the page in IE, it looks just like I want
it to. However, when I launch it in Firefox or Netscape, the very back layer
moves down about 20 pixels and another layer end up moving up probably 15
pixels. Long story short, it doesn't look right. Graphics are running into
graphcis where previously there was some space. I am really new using Layers,
but they were working great when primarily viewing in IE. I need to figure
this out before we proceed. The current situation is not acceptable, in that
those who view the site in Firefox or Netscape are going to get sort of a
jumbled view. Any advice would be greatly appreciated!

mhaddon (AT) utah (DOT) gov

Advice:

Don't use layers unless you know their pitfalls. You have just found some.

If you are not familiar with absolute positioned layers and their lack
of 'flexible' ability then you should use tables.

A view of what it is you are trying to achieve would be usefull. Then
someone could provide you with some guidance of how to go about the
construction.

Can you provide some visual content?

#3

Quote:

It is made up of several layers, each positioned absolutely

That's what makes a layer a layer, so to speak.

Quote:

Right now, I have about six layers on the page, some on top of others.

Why so many?

Quote:

Long story short, it doesn't look right.

Yeah - that's usually the downside of using layers. Show me your page and
I'll tell you what you might have done wrong.

Quote:

I am really new using Layers

I get that idea.

This may help you understand positioning a bit -

There are 4 different types of positioning:
Absolute
Relative
Fixed
Static

Here is a brief explanation of each kind of positioning (with regard to
placement of elements on the page only)....

Position:absolute (or A/P elements)
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the* page so that
it can no longer influence the size or position of any other pa*ge element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PA*RENT *positioned* element - in the absence of any explicitly
positioned parent, this will default to the <body> tag, which is always
positioned
*at 0,0 in the browser viewport.

This means that it doesn't matter where in the HTML code the laye*r's code
appears (between <body> and </body>), its location on the screen will not
change (this assumes that you have not positioned the A/P element within
a table or another A/P element, of course). Furthe*rmore, the space in
which
this element would have appeared were it not positi*oned is not preserved
on the screen. In other words, absolutely positioned elements don't take
up any space on the page. In fact, they FLOAT over the page.

Position:relative (or R/P elements)
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from t*he flow of the code on the page, so it will use the
spot
where it would have* appeared based on its position in the code as its
zero point reference. If* you then supply top, right, bottom, or left
positions
to the style for this *element, those values will be used as offsets from
its
zero point.

This means that it DOES matter where in the code the relativ*ely positioned
element appears (, as it will be positioned in that location (*factoring in
the offsets) on the screen (this is true for any placement in the code).
Furthermore, the space where this e*lement would have appeared is
preserved in the display, and can therefore* affect the placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.

Position:static
-------------------
As with relative position, static positions also "go with *the flow". An
element with a static position cannot have values for offset*s (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.

Position:fixed
------------------
A page element with this style will not scroll as the page c*ontent scrolls.
Support for this in elements other than page backgrounds is *quirky

There are several other things you need to know:

1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other
elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.

You can see a good example of the essential difference between absolute and
relative positioning here -

http://www.great-web-sights.com/g_layersdemo.asp

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"mhaddon" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

We are working on a page in Dreamweaver 8. It is made up of several
layers,
each positioned absolutely. Right now, I have about six layers on the
page,
some on top of others. When I launch the page in IE, it looks just like I
want
it to. However, when I launch it in Firefox or Netscape, the very back
layer
moves down about 20 pixels and another layer end up moving up probably 15
pixels. Long story short, it doesn't look right. Graphics are running
into
graphcis where previously there was some space. I am really new using
Layers,
but they were working great when primarily viewing in IE. I need to
figure
this out before we proceed. The current situation is not acceptable, in
that
those who view the site in Firefox or Netscape are going to get sort of a
jumbled view. Any advice would be greatly appreciated!

mhaddon (AT) utah (DOT) gov

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Layers Not Staying Put In Netscape/Firefox

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)

Layers Not Staying Put In Netscape/Firefox - 11-15-2005 , 10:18 AM

Re: Layers Not Staying Put In Netscape/Firefox - 11-15-2005 , 10:21 AM

Re: Layers Not Staying Put In Netscape/Firefox - 11-15-2005 , 10:40 AM