Email conversation
| From | Dean Cole |
|---|
| To | Me |
|---|
| Subject | Drop down menu |
|---|
| Date | 3 September 2003 21:10 |
|---|
Hello,
I found your site while searching the web for a 'positioning layer'
solution. My problem is this. I have created a drop down menu using tables
and layers and it works fine except when the screen resolution changes the
layers are all over the screen. I tried looking at other pages to see how
others acomplished this but found it quite difficult to follow the code. I
also found that hardly any two sites did this the same way. I need clear
and easy way to accomplish this-assuming there is one. I find your site
quite helpful in other areas and your explanations quite clear.
Dean.
| From | Me |
|---|
| To | Dean Cole |
|---|
| Subject | Re: Drop down menu |
|---|
| Date | 4 August 2003 09:20 |
|---|
This sounds like quite a common problem, and one I should know how
to fix, but I need a couple more details:
In what browsers do you notice this problem? Is it just Netscape 4?
How are you setting the position of the layers? is it with percentages or
pixels etc.?
Tarquin - author of http://www.howtocreate.co.uk
| From | Dean Cole |
|---|
| To | Me |
|---|
| Subject | Re: Drop down menu |
|---|
| Date | 4 September 2003 16:15 |
|---|
Hello Mark,
I viewed the page in explorer 5 at different resolution. The layers change
position when the resolution changes. Here I included the div tags I use.
I use an onMouseover event to show the layers.
<div id="Menu" style="position:absolute; left:72px; top:122px;
width:215px; height:96px; z-index:2; background-color: #FFFFFF;
layer-background-color: #FFFFFF; border: 0px none #000000; visibility:
hidden;"><a href="javascript:;" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('background','','images/background1.gif',1)"><im
g src="images/background.gif" alt="background" name="background"
width="215" height="17" border="0"></a><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('challenges','','images/challenges1.gif',1)"><im
g src="images/challenges.gif" alt="challenges" name="challenges"
width="215" height="17" border="0"></a><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Benefits','','images/benefits1.gif',1)"><img
src="images/benefits.gif" alt="Benefits" name="Benefits" width="215"
height="17" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Practice','','images/bpractices1.gif',1)"><img
src="images/bpractices.gif" alt="Best Practices" name="Practice"
width="215" height="17" border="0"></a><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Standards','','images/standards1.gif',1)"><img
src="images/standards.gif" alt="Standards" name="Standards" width="215"
height="17" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Contacts','','images/contacts1.gif',1)"><img
src="images/contacts.gif" alt="Contacts" name="Contacts" width="215"
height="17" border="0"></a></div>
<div id="Layer1" style="position:absolute; left:67px; top:125px;
width:193px; height:111px; z-index:1; visibility: visible;"><a
href="javascript:;" onMouseOver="MM_showHideLayers('Menu','','hide')"><img
src="images/transparent.gif" width="231" height="141"
border="0"></a></div></td>
| From | Me |
|---|
| To | Dean Cole |
|---|
| Subject | Re: Drop down menu |
|---|
| Date | 4 August 2003 19:40 |
|---|
Your problem is quite interesting. The layers as you have provided them
cannot change position as the resolution changes because they are
absolutely positioned with pixel precision:
position:absolute; left:72px; top:122px;
position:absolute; left:67px; top:125px;
They are fixed to a certain position on the page. If they are moving when
they shouldn't it must be because you have them inside a relatively
positioned layer OR, you have managed to encounter an IE bug because you
have put them inside a table. I note the telltale </td> tag at the
end of the code you sent, so I assume this is the problem. For absolutely
positioned elements to be positioned correctly, they need to be put as
children of the body tag, and no other tags inside that:
<body>
<table ...>
...
<tr><td>
<div style="position:absolute;">
The layer should NOT be put here!
</div>
</td></td>
...
</table>
...otherContent...
<div style="position:absolute;">
this is where the layer should be put
</div>
</body>