Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Image not sticking to epandable menu

    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:
    Code:
    <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.

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Could you send us a link, so we can see whats wrong, or give us some code?

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the link. Warning, the site contains some adult content , 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
    Last edited by cbouchar; 03-09-2005 at 03:54 AM.

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the CSS, if it helps....


    Code:
    #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');
    }

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Most of the menu was simply modified from this menu here:
    http://simplythebest.net/scripts/DHT...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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •