Rick:
Layers are absolutely positioned page elements. This means
that you specify
their position using top/right/bottom/left attribute values.
Your layers
had top atribute values, but no left ones. This means that
they *would*
have all lined up on the left margin of the page (since they
are positioned
with regard to the <body> tag if there is no positioned
ancestor present -
and in your case there was not). However, your left margin
specification
moved them away from the left margin by an equivalent amount.
That amount
was not enough, though, to place them over the button
background images
*except* when the browser viewport was sufficiently narrow to
put the left
side of the page right on the left margin. I believe if you
would go back
to your original layout and mouse to the left of the store
button, you would
find a spot where the over image would appear.
What I did was to make your #wholepage div be relatively
positioned. As
such, it will then become a 'nearest positioned ancestor' for
all the layers
on the page. Then, since it is a centering div (the margin:0
auto), when it
moves, the layers will move with it, i.e., they retain their
alignment with
content on the page.
Also, I removed the left margins on the layers and replaced
them with left
positions.
Finally, I gave the layers a z-index value of 99 to make sure
that they are
on top of everything else on the page.
> And I particularly don't understand why any of this
would cause the
> javascript
> to fail in IE while working in other browsers.
That was your interpretation - but it was wrong. The
javascript was working
fine. The problem was that you were mousing over where you
thought the
layer should have been but it was not there. When you have
such problems,
adding a background color to the layers is a good idea.
--
Murray --- ICQ 71997575
Adobe Community Expert
(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
==================
"Rick Feldkamp" <webforumsuser@macromedia.com> wrote in
message
news:em8uhg$oqc$1@forums.macromedia.com...
> Thanks again. I made a few simple changes to my
stylesheet and everything
> works
> fine now.
>
> However, I'm not precisely sure why. If you can spare a
bit of time to
> educate me further, that would be great. If not, maybe
you can point me
> somewhere.
>
> Having never had any formal training in this, I'm just
guessing at how to
> properly position the div's. I was using left-margin,
whereas you used
> left.
> Apparently, this also requires that the larger bounding
div's position to
> be
> set to relative, but I'm not sure why. I'm vaguely aware
that the z-index
> indicates a layer order, but I'm not clear on when to
use it or why it was
> needed here. I know this creates a layer that rides on
top of the others,
> but
> in the past, I've had difficulty getting them to line up
in any manner
> other
> than a fixed position on the screen. Here, I needed them
to be positioned
> relative to other elements.
>
> And I particularly don't understand why any of this
would cause the
> javascript
> to fail in IE while working in other browsers.
>
> Thanks again for the help and any further direction you
might provide.
>
6
Replies
AdChoices