pjelias
asked on
Help with Layers and Positioning
I know there are alot of questions and answers out there already in regards to positioning of layers, but I am still unable to resolve my issue.
I have setup a page layout using a Table, to place images, menus, body content etc.... which all works well.
I am now wanting to design a page that has a submenu or 3 items that when the mouse moves over them, a layer (1,2 or 3) appears at position X - top left of cell - see image below.
|-------------------------
| |
|------------------------|
| x | Sub Menu1 |
| | Sub Menu2 |
| | Sub Menu3 |
| | |
| | |
| | |
| | |
|------------------------|
I have tried absolute, relative, static etc... with the STATIC being the closest to what I want, the problem is that the second layer appears below the 1st, the 3rd layer below the 2nd (ie height of each prior layer below) etc... instead of at the same top, left co-ordinate.
I am using Dreamweaver, and also some javascript to hide and show each layer on the mouse over event.
Furthermore, the layers may contain Text, Graphics, a Flash file etc....
Thanks in advance
PJE
I have setup a page layout using a Table, to place images, menus, body content etc.... which all works well.
I am now wanting to design a page that has a submenu or 3 items that when the mouse moves over them, a layer (1,2 or 3) appears at position X - top left of cell - see image below.
|-------------------------
| |
|------------------------|
| x | Sub Menu1 |
| | Sub Menu2 |
| | Sub Menu3 |
| | |
| | |
| | |
| | |
|------------------------|
I have tried absolute, relative, static etc... with the STATIC being the closest to what I want, the problem is that the second layer appears below the 1st, the 3rd layer below the 2nd (ie height of each prior layer below) etc... instead of at the same top, left co-ordinate.
I am using Dreamweaver, and also some javascript to hide and show each layer on the mouse over event.
Furthermore, the layers may contain Text, Graphics, a Flash file etc....
Thanks in advance
PJE
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
However,
the 3 Browsers - IE 6, Firefox 2 and Opera 9.01 all have slightly different results - Layer 1 - Top = 80, Layer 2 Top = -175
Firefox - Spot On
Opera - Layer 2 appears about 20 px lower than Layer 1 (the bottom of the layers appear aligned - as the amount of text is more within layer 1)
IE - Layer 2 appears lower than Layer 1, but both layers are higher up the page. ie Firefox and Opera, layer1 appears about 20px below submenu text, yet within IE, layer1 appears about 1px below submenu Text ???
the 3 Browsers - IE 6, Firefox 2 and Opera 9.01 all have slightly different results - Layer 1 - Top = 80, Layer 2 Top = -175
Firefox - Spot On
Opera - Layer 2 appears about 20 px lower than Layer 1 (the bottom of the layers appear aligned - as the amount of text is more within layer 1)
IE - Layer 2 appears lower than Layer 1, but both layers are higher up the page. ie Firefox and Opera, layer1 appears about 20px below submenu text, yet within IE, layer1 appears about 1px below submenu Text ???
ASKER
I had to set the top position of Layer 2 to a negative position relative to the first layer ???