Stacked Layers Pushing Each Other Around in IE

ShiroHagen · ShiroHagen

Hi

I'm building a site with Dreamweaver at [url]www.mystery.co.uk/monkeynuts[/url]

The homepage is currently fine on my Mac in Safari & Firefox, but buggy in IE
on Mac & PC. This page involves layers which I have attempted to stack relative
to the page when it is resized. In IE it seems that the layers keep their size
and don't allow the others to overlap them leading to a wierd layout.

How can I get the 2 stars to float at either side of the banana girl? I'd like
the layout to fill the screen as intuitively as possible so the layers should
float downward when the page is resized. The plan is to eventually randomise
the main image so the stars will always float above whatever sized image is
underneath.

Help!

?

Murray *TMM* · Murray *TMM*

>This page involves layers which I have attempted to stack relative

> to the page when it is resized.

You need to really understand relative positioning.

This may help you a bit -

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

Here is a brief explanation of each kind....

Position:absolute
-----------------------
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. 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
----------------------
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. 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 two 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%).

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

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

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

"ShiroHagen" <webforumsuser@macromedia.com> wrote in message
news:didipk$135$1@forums.macromedia.com...

> Hi
>
> I'm building a site with Dreamweaver at [url]www.mystery.co.uk/monkeynuts[/url]
>
> The homepage is currently fine on my Mac in Safari & Firefox, but buggy in
> IE
> on Mac & PC. This page involves layers which I have attempted to stack
> relative
> to the page when it is resized. In IE it seems that the layers keep their
> size
> and don't allow the others to overlap them leading to a wierd layout.
>
> How can I get the 2 stars to float at either side of the banana girl? I'd
> like
> the layout to fill the screen as intuitively as possible so the layers
> should
> float downward when the page is resized. The plan is to eventually
> randomise
> the main image so the stars will always float above whatever sized image
> is
> underneath.
>
> Help!
>
> ?
>

Stacked Layers Pushing Each Other Around in IE

Thread Tools

Display

Stacked Layers Pushing Each Other Around in IE

Similar Questions and Discussions

Pushing XML to multiple swfs

Pushing Flash 8 using SMS

Pushing to two servers that share the same URL

Pushing the Envelope....

Pushing film vs underexposing

Re: Stacked Layers Pushing Each Other Around in IE

Posting Permissions