layering problem!!

[charon]

hi ,
I use e very simple way for creating my mouseover menu, that is using <div> tag and css. below is my code:


function showMenu(id)
{
if(!supported)
return;

if (supported)
obj = (dom) ? document.getElementById(id) : document.all(id)

//the absolute position display differently in IE and Nestcape, so need to reposition
if(dom2){


obj.style.left=100
obj.style.top = 555
obj.style.visibility='visible';

}

obj.style.visibility='visible';



}


function hideMenu(id)
{
if(!supported)
return;

if (supported)
obj = (dom) ? document.getElementById(id) : document.all(id)

obj.style.visibility='hidden';
}

#ampmenu {position:absolute; margin-left:125px; margin-top:-244px; visibility:hidden}

/ I add an animation gif file here...
<table></tr><td>
<div id="ampmenu" onMouseOver=showMenu("ampmenu") onMouseOut=hideMenu("ampmenu")>
Link1
Link2
Link3
</div>
</tr></td>



Everything going well, except, when I change the height of the layout page, for instance add a small animation before the LINK (Link1, Link2 and Link3), the menu not display in the original posistion, I need to change the margin-top of the layer when the height of the layout is changed, WHY???????

Please advice!

[Mr J]

Possibly because you are using an absolute position

[beetle]

ya, here's a quickie example about absolute/relative positioning. Let's assume the following html<p>
Hello World!
</p>
<p>
Hello World!
</p>
<p>
Hello World!
</p>
<div id="1">
Div 1
<div id="2">
Div 2
</div>
</div>Now, for the first example, these stylesdiv#1 {
width: 200px;
height: 200px;
}
div#2 {
position: absolute:
left: 20px;
top: 20px;
width: 200px;
height: 200px;
}What does all this look like? Probably something like this Hello World!

Hello World!
+------------------+
Hello |Div 2 |
| |
+-----| |
|Div 1| |
| | |
| | |
| | |
| | |
| | |
| +------------------+
| |
| |
+------------------+Now, let's make one tiny change to the stylesheetdiv#1 {
position: relative;
width: 200px;
height: 200px;
}What we get now? Something like thisHello World!

Hello World!

Hello World!
+------------------+
|Div 1 |
| |
| +------------------+
| |Div 2 |
| | |
| | |
| | |
| | |
| | |
+-----| |
| |
| |
+------------------+So, what does all this mean? If an HTML element is positioned absolutely, it gets its 0,0 coordinate by default from the BODY. Now, if that same HTML element has a parent element that is positions relatively OR absolutely, then it gets its 0,0 coordinate from THAT parent element.

Make sense?

[charon]

ok, thanks a lot, u give a very good example.....
i will try to modify and see how.....

[charon]

hi,

if use relative, when the browser resize, then the position of the menu (left and right) out of the "Link". as below:

Before the window resize

Link 1 -------------------
| |
| menu |
| |
| |
--------------------

After resize, the menu will move to left or right.....
Link 1
-------------------
| |
| menu |
| |
| |
--------------------

Please advice!!

If I can't solve the problem then will stick to my original simple way, modify the position value whenever I change the layout of the page. is that OK??

[beetle]

It would be very difficult to say without seeing the styles and the HTML, but yes, it is perfectly fine to do it the original way until you have the knowledge to change it :D

[mgersting]

also, for good measure, make sure to set your page margins to 0 for all browsers...this will likely help with the problem.

[Mr J]

I am puzzled as to why you have margins of

margin-left:125px;

margin-top:-244px