...
PDA

Image not sticking to epandable menu

cbouchar
03-08-2005, 04:50 PM
I am using the following expandable menu:
http://simplythebest.net/scripts/DH..._script_15.html
in a DIV.
The div expands and collapses with the menu. I have a graphic at the top and bottom to sort of 'frame it'. I needed to add a small padding on the left side of the DIV to get the text to move away from the edge but it also moved the graphics that were at the top and bottom.

To fix that, I added the style attribute to create this:
<img src="leftmenubottom1.bmp" width="136" height="14" style="position: absolute; left: 0;">

This caused the images to line up correctly with the left edge of the DIV, essentially disregarding the padding. This worked great in IE but in FF, the bottom graphic doesn't stick to the menu. When the menu expands, the graphic moves down but won't move back up after the menu contracts. It sits down the screen until I refresh. It functions in IE - perfectly. What can I do so that it works in both?

Any help would be appreciated.

ps. I know I shouldn't be using bmp's for my site, I just haven't converted them all to jpg/gif yet.
whizard
03-08-2005, 07:09 PM
Could you send us a link, so we can see whats wrong, or give us some code?

Dan
cbouchar
03-08-2005, 11:57 PM
Here is the link. Warning, the site contains some adult content :eek: , although not much because the site isn't complete yet.

link removed

Try the menu in different browsers. Don't bother with the actual links, but click the menu headings to expand the menu and notice how it functions differently in each browser.

What elements need to be changed in order for it to function properly in both?

Thanks
cbouchar
03-09-2005, 04:02 AM
Here is the code with the adult content removed. Sorry about the previously posted link.

Please help with the menu. It is in the LEFT div. It starts about half way down and goes almost to the bottom.


<html>
<head>
<title>Two Column CSS Layout with Header</title>



<LINK
href="qstyle.css" rel=stylesheet type=text/css>
<SCRIPT language=JavaScript src="script_files/wrapscript.js"></SCRIPT>
<SCRIPT language=JavaScript>

<!--
bAgent=navigator.userAgent;
btype=bAgent.substring(8,9);
isMac=(bAgent.indexOf("Mac")>=0);
isIE=(bAgent.indexOf("MSIE")>=0);
useframes=((isMac && isIE && btype<="3") || (btype<="2" && !(bAgent.indexOf("MSIE 3")>=0)));
function loader() {
if(!useframes) nsloading();
}
//-->
</SCRIPT>

</head>
<body bgcolor="#333333">
<div id="header" style="width: 350px"><img border="0" src="NewHeader1.jpg" width="350" height="100"></div>

<div id="leftheader">
</div>

<div id="ablogo">
</div>

<div id="topleft">
</div>

<div id="centerleftborder" style="z-index: 1">
</div>

<div id="centerrightborder" style="z-index: 1">
<img src="Gradient_topright.gif" width="11" height="11"></div>

<div id="centertopborder" style="z-index: 1">

<img src="Gradient_topleft.gif" width="11" height="11"></div>

<div id="centerbottomborder" style="z-index: 1">
<img src="Gradient_bottomleft.gif" width="11" height="11"></div>

<div id="centerbottomrightcorner" style="z-index: 1">
<img src="Gradient_bottomright.gif" width="11" height="11"></div>

<div id="left">
<p style="margin-top: 0; margin-bottom: 0">
<img src="leftmenutop1.bmp" width="136" height="24" style="position: absolute; left: 0;">
&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0">
&nbsp;</p>
<div class="NV0" id="TP">

<div> <div class="NV1"
id="RR" onclick="clikker1(RR2,BB2,CC2,DD2,EE2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(1)" onmouseover="msover(1)"> &nbsp;<img border="0" height="18" id="RRp" src="script_files/Menu-1-NewMovies1.gif" width="100"></div>
<div class="NV2" id="RR2" style="DISPLAY: none">
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1
</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br> </div>
<div class="NV1"
id="BB" onclick="clikker2(BB2,RR2,CC2,DD2,EE2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(2)" onmouseover="msover(2)"> &nbsp;<img border="0" height="18" id="BBp" src="script_files/Menu-2-Fetish1.gif" width="100">

</div> <div class="NV2" id="BB2" style="DISPLAY: none">
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type1</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type2</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type3<br></a>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type4<br></a>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type5</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type6</a><br> </div>
</div> <div class="NV1" id="CC"
onclick="clikker3(CC2,RR2,BB2,DD2,EE2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(3)" onmouseover="msover(3)"> &nbsp;<img border="0" height="18" id="CCp" src="script_files/Menu-3-Studio1.gif" width="100">
</div> <div class="NV2" id="CC2" style="DISPLAY: none">
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Production Company1<br></a>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Production Company2</a><br></div>
<div class="NV1" id="DD"
onclick="clikker4(DD2,RR2,BB2,CC2,EE2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(4)" onmouseover="msover(4)"> &nbsp;<img border="0"height="18" id="DDp" src="script_files/Menu-4-Starring1.gif" width="100">

</div> <div class="NV2" id="DD2" style="DISPLAY: none">
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Female Performer</a><br> </div>
<div class="NV1" id="EE"
onclick="clikker5(EE2,RR2,BB2,CC2,DD2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(5)" onmouseover="msover(5)"> &nbsp;<img border="0" height="18" id="EEp" src="script_files/Menu-5-Archive1.gif" width="100">
</div> <div class="NV2" id="EE2" style="DISPLAY: none">
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title1</a><br> </div>
<div class="NV1" id="FF"
onclick="clikker6(FF2,RR2,BB2,CC2,DD2,EE2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(6)" onmouseover="msover(6)"> &nbsp;<img border="0" height="18" id="FFp" src="script_files/Menu-6-AboutUs1.gif" width="100"></div>
<div class="NV2" id="FF2" style="DISPLAY: none">

<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">FAQ</a><br> </div>
<div class="NV1" id="GG"
onclick="clikker7(GG2,RR2,BB2,CC2,DD2,EE2,FF2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(7)" onmouseover="msover(7)"> &nbsp;<img border="0" height="18" id="GGp" src="script_files/Menu-7-Contact1.gif" width="100"></div>
<div class="NV2" id="GG2" style="DISPLAY: none">
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Network Issues</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Site Issues</a><br> </div>
<div class="NV1" id="HH"
onclick="clikker8(HH2,RR2,BB2,CC2,DD2,EE2,FF2,GG2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(8)" onmouseover="msover(8)"> &nbsp;<img border="0" height="18" id="HHp" src="script_files/Menu-8-Links1.gif" width="100"></div>
<div class="NV2" id="HH2" style="DISPLAY: none">

<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Codecs</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Media Player</a><br>
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Categories</a><br> </div>
<div class="NV1" id="II"
onclick="clikker9(II2,RR2,BB2,CC2,DD2,EE2,FF2,GG2,HH2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(9)" onmouseover="msover(9)"> &nbsp;<img border="0" height="18" id="IIp" src="script_files/Menu-9-JoinNow1.gif" width="100"></div>
<div class="NV2" id="II2" style="DISPLAY: none">
<p style="margin-top: 0; margin-bottom: 0">
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Join Now</a><br> </div>

<p style="margin-top: 0; margin-bottom: 0"><img src="leftmenubottom1.bmp" width="136" height="14" style="position: absolute; left: 0;"></div></div>

<div id="center" style="width:789px; height:445px">
&nbsp;<p align="center"><font color="#FF0000">Content</font><font color="#FF0000"></div></body>
</html>
cbouchar
03-09-2005, 12:31 PM
Here is the CSS, if it helps....



#HeadTop { LEFT: 8px; POSITION: absolute; TOP: 10px}
#globalS { LEFT: 8px; POSITION: absolute; TOP: 10px}
#Head1 { LEFT: 8px; POSITION: absolute; TOP: 10px}
#Menu1 { LEFT: 16px; POSITION: absolute}
#Head2 { LEFT: 8px; POSITION: absolute}
#Menu2 { LEFT: 16px; POSITION: absolute}
#Head3 { LEFT: 8px; POSITION: absolute}
#Menu3 { LEFT: 16px; POSITION: absolute}
#Head4 { LEFT: 8px; POSITION: absolute}
#Menu4 { LEFT: 16px; POSITION: absolute}
#Head5 { LEFT: 8px; POSITION: absolute}
#Menu5 { LEFT: 16px; POSITION: absolute}
#Head6 { LEFT: 8px; POSITION: absolute}
#Menu6 { LEFT: 16px; POSITION: absolute}
#HeadBottom { LEFT: 8px; POSITION: absolute}
A { COLOR: red}
A.visited { COLOR: #ff0000}
A:hover { COLOR: #ffdd00}
A.roll { COLOR: red; FONT-SIZE: 9pt; FONT-FAMILY: verdana; TEXT-DECORATION: none;}
A.roll:hover { COLOR: #FF6600; FONT-FAMILY: verdana; background: #303030; TEXT-DECORATION: none;}
A.nav { COLOR: #000000; FONT-SIZE: 7pt; TEXT-DECORATION: none}
A.nav:hover { COLOR: #ff0000}
body { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right:0; padding-left: 0; padding-right: 0;
}
#header { position: absolute; margin-left: 381px; top: 60px; height: 100px; width 350px;
}
#ablogo { position: absolute; margin-left: 2px; top: 550px; height: 56px; width: 150px; background: url('ABlogo.gif');
}
#leftheader { position: absolute; left: 800px; top: 60; height: 100px; width: 159px;
}
#topleft { position: absolute; left: 5px; top: 10; height: 150px; width: 150; background: url('NewCircleTest.gif');
}
#left { position: absolute; left: 5px; top: 180px; width: 136px; background: url('leftmenubar1.bmp') repeat-y; padding-left: 5px;
}
#center { position: absolute; top: 171; margin-left: 166px; bottom: 445px; background:#000000; width: 789px;
}
#centerbottomrightcorner { position: absolute; top: 616; margin-left: 955px; width: 11px; height: 11px;
}
#centerleftborder { position: absolute; top: 160; margin-left: 155px; width: 11px; height: 456px; background: url('Gradient_left.gif');
}
#centertopborder { position: absolute; top: 160; margin-left: 155px; width: 800px; height: 11px; background: url('Gradient_top.gif');
}
#centerrightborder { position: absolute; top: 160; margin-left: 955px; width: 11px; height: 456px; background: url('Gradient_right.gif');
}
#centerbottomborder { position: absolute; top: 616; margin-left: 155px; width: 800px; height: 11px; background: url('Gradient_bottom.gif');
}
cbouchar
03-12-2005, 01:26 AM
Here is the page with the naughty-bits blurred out. Hopefully you will be able to help me now that you can see the menu and the whole page layout.
The Link to my Site (http://tammylovescock.adultbouncer.com/testing/jeff/clean1.htm)

Most of the menu was simply modified from this menu here:
http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_15.html

My problem is that the menu does not function the same way in FireFox as it does in Internet Explorer. It works great in IE but in FF, the bottom graphic of the menu does not collapse back with the menu when the 1st menu section is expanded. When the other sections are expanded, the graphic doesn't move at all.

Please help :(

Thank you

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum