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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help - Fly out menu not working in IE7

    For some reason this menu does not work in IE7 -

    My website is:http://all-things-aviation.com/pilot-shop

    My style-3.css is as follows;

    Code:
    /* common styling */
    .cssfly {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:10px 0 50px;}
    .cssfly ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; border-width:1px 1px 0 0; background: #003366; color:#ffffff; line-height:19px; font-size:11px; border-color: #fff; border-style: solid; }
    .cssfly ul {padding:0; margin:0;list-style-type: none; }
    .cssfly ul li {float:left; margin-right:1px; position:relative;}
    .cssfly ul li ul {display: none;}
    
    /* specific to non IE browsers */
    .cssfly ul li:hover a {color:#fff; background:#000;}
    .cssfly ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
    .cssfly ul li:hover ul li a.hide {background:#ccc; color:#000;}
    .cssfly ul li:hover ul li:hover a.hide {width:150px;}
    .cssfly ul li:hover ul li ul {display: none;}
    .cssfly ul li:hover ul li a {display:block; background:#ccc; color:#000; width:150px;}
    .cssfly ul li:hover ul li a:hover {background:red; color:#000;}
    .cssfly ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
    .cssfly ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
    .cssfly ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
    My html is:

    Code:
    <div class="cssfly"> 
    <ul>
    
     <li><a href="#">Aviator Sunglasses</a>
       <ul>
        <li><a href="/sunglasses/aviator-sunglasses/">Randolph Aviators</a></li>
        <li><a href="/sunglasses/randolph-concorde/">Randolph Concorde</a></li>
        <li><a href="/sunglasses/randolph-crew-chief/">Randolph Crew Chief</a></li>
        <li><a href="/sunglasses/randolph-intruder/">Randolph Intruder</a></li>
        <li><a href="/sunglasses/randolph-jag/">Randolph Jag</a></li>
        <li><a href="/sunglasses/randolph-raptor/">Randolph Raptor</a></li>
        <li><a href="/sunglasses/ao-original-pilot/">AO Original Pilot</a></li>
        <li><a href="/sunglasses/ao-general/">AO General</a></li>
        <li><a href="/sunglasses/serengeti-aviators/">Serengeti Aviators</a></li>
        <li><a href="/sunglasses/serengeti-velocity/">Serengeti Velocity</a></li>
       </ul>
      </li> <!-- end "Sunglasses" list item -->
    
      <li><a href="#">FLITELite</a>
            <ul>
              <li><a href="/flitelite/">FLITELite</a></li>
            </ul>
          </li><!-- end "FLITELite" list item -->
    
      <li><a href="#">Gleim Manuals</a>
       <ul>
        <li><a href="/private-pilot/gleim-private-pilot-manual/">Gleim Private Pilot</a></li>
       </ul>
      </li> <!-- end "Gleim Manuals" list item -->
     
      <li><a href="#">Flight Computers</a>
       <ul>
        <li><a href="/private-pilot/pathfinder-cx-2-flight-computer/">ASA Pathfinder CX-2</a></li>
       </ul>
      </li> <!-- end "Flight Computers" list item -->
     
      <li><a href="#">FAR/AIM Manuals</a>
       <ul>
        <li><a href="/jepp-far-aim/">Jepp FAR/AIM Manual</a></li>
        <li><a href="/gleim-far-aim/">Gleim FAR/AIM Manual</a></li>    
         <li><a href="/asa-far-aim/">ASA FAR/AIM Manual</a></li>
       </ul>
      </li> <!-- end "FAR/AIM Manuals" list item -->
    
      <li><a href="#">Garmin  Manuals</a>
       <ul>
        <li><a href="/garmin-gns530430-training-manuals/">Garmin530/430 Manualsl</a></li>   
       </ul>
      </li> <!-- end "FAR/AIM Manuals" list item -->
    
      <li><a href="#">Jepp Pilot Manuals</a>
       <ul>
        <li><a href="/private-pilot/jeppesen-private-pilot-manual/ ">Private Pilot</a></li>
        <li><a href="/jeppesen-instrument-commercial/">Instrument Commercial</a></li>
       <li><a href="/jeppesen-flight-instructor-textbook/">Jepp CFI Manual</a></li>
    </ul>
      </li> <!-- end "Jepp Pilot Manuals" list item -->
    
       <li><a href="#">Paper Airplanes</a>
        <ul>
           <li><a href="/piper-cub/">Piper J-3 Cub</a></li>
           <li><a href="/cessna-bobcat/">Cessna Bobcat</a></li>
            <li><a href="/curtiss-jn4-jenny/">Curtiss  JN-4 Jenny</a></li>
             <li><a href="/lockheed-vega-winnie-mae/">Vega Winnie Mae</a></li>
             <li><a href="/messerschmitt-me109d/">Me109D</a></li>
             <li><a href="/messerschmitt-me109e/">Me109E </a></li>
             <li><a href="/messerschmitt-me1112/">Me1112</a></li>
             <li><a href="/nieuport-17/">Nieuport 17</a></li>
             <li><a href="/north-american-p51a/">P-51A Mustang</a></li>
             <li><a href="/spad-vii/">Spad VII</a></li>
             <li><a href="/spad-xiii/">Spad XIII</a></li>
           </ul>
         </li><!-- end "Paper Airplane Models" list item -->
    
    
    
    </ul>
    </div>
    The problem I have is that in Internet Explorer 7 it will show all the items in the drop down, but when I go to access some of them they disappear.

    For example, the Aviator Sunglasses drop down flyout list shows all the items, but when I go to access them they disappear. The strange part is that some of the main items further down (like Paper Airplanes) work fine.

    I would appreciate any help.

    Thanks,

    John

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #sidebarleft li li li {
    	background-image:none;
    	border:0;
    	padding: 0;
    	}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I don't understand

    Thank you for your reply; however, I am a newbie when it comes to coding.

    Where do I use the code you provided? I don't understand what I am supposed to do with the code you provided, where to put it, etc? Do I add to the style-3.css file, replace that file with your code, or what do I do?

    Please provide a little more specific information please.

    Thanks.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    In your http://all-things-aviation.com/wp-co...asic/style.css, you've
    Code:
    #sidebarleft li li li {
    	background-image:none;
    	border:0;
    	padding: 1px 0;
    	}
    Change that highlighted line to padding: 0;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks for your help!

    Works like a charm.

    Regards,

    John


  •  

    Tags for this Thread

    Posting Permissions

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