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

    CSS and IE drop down

    Hey guys im having a really big problem with my site. It shows up fine in every browser except the old version of any IE. Can you guys help me out.

    The problem image is attached

    Here's the HTML code:

    Code:
    <tr>
    <td>
            
    <div id="wrapper">
    <div id="navMenu">
    
    
      <ul>
    
         <li><a href="home.html">Home</a>
           <ul>
       
           </ul> <!-- end inner UL -->
    
    
      </li> 
         <!-- end main LI -->
    
      </ul> <!-- end main UL -->
      
        <ul>
    
         <li><a href="aboutus.html">About</a>
       
           <ul>
    
           </ul> <!-- end inner UL -->
    
    
      </li> 
         <!-- end main LI -->
    
        </ul> <!-- end main UL -->
      
        <ul>
    
         <li><a href="aboutvictoria.html">Victoria</a>
       
      <ul>
    
        <li><a href="victoriastilwellarticle.html">Articles</a></li>
    
        <li><a href="philosophy.html">Philosophy</a></li>
    
        <li><a href="vspdt.html">VSPDT</a></li>
    </ul> <!-- end inner UL -->
    
    
      </li> 
         <!-- end main LI -->
    
        </ul> <!-- end main UL -->
      
          <ul>
    
         <li><a href="photos.html">Photos</a>
       
      <ul>
      </ul> <!-- end inner UL -->
    
    
      </li> 
         <!-- end main LI -->
    
          </ul> <!-- end main UL -->
      
          <ul>
    
         <li><a href="links.html">Links</a>
       
      <ul>
      </ul> <!-- end inner UL -->
    
    
      </li> 
         <!-- end main LI -->
    
          </ul> <!-- end main UL -->
      
          <ul>
    
         <li><a href="trainingprograms.html">Training</a>
       
      <ul>
      
      <li><a href="trainingmethods.html">Methods</a></li>
    
        <li><a href="whyreinforcement.html">Positive(+R)</a></li>
    
        <li><a href="class.html">C.L.A.S.S</a></li>
        
      </ul> <!-- end inner UL -->
    
    
      </li> 
         <!-- end main LI -->
    
          </ul> <!-- end main UL -->
      
          <ul>
    
         <li><a href="http://dynamitedogtraining.blogspot.com/">Blog</a>
       
      <ul>
      </ul> <!-- end inner UL -->
    
    
      </li> 
         <!-- end main LI -->
    
          </ul> <!-- end main UL -->
      
          <ul>
    
         <li><a href="contact.html">Contact</a>
       
      <ul>
      </ul> <!-- end inner UL -->
    
    
      </li> 
         <!-- end main LI -->
    
          </ul> <!-- end main UL -->
      
      
    
        <br class="clearFloat" />
    
     
     </div> <!-- end navMenu -->
     </div> 
    <!--end wrapper -->
     
     </td>
     </tr>


    And here's the CSS code:


    Code:
    #navMenu {
        margin:0;
        width:auto;
        background-image: url(images/Home_top_06.jpg);
        padding:0;
    }
    
      #navMenu ul {
        margin:0;
        padding:0;
        line-height:30px;
        background-color: #333;
        
     }
    
      #navMenu li {
        margin:0;
        padding:0;
        list-style:none;
        float:left;
        position:relative;    
    }
    
      #navMenu ul li a {
        text-align:center;
        height:36px;
        width:70px;
        display:block;
        font-family:"Comic Sans MS", cursive;
        text-decoration:none;
        color:#FFF;
        text-shadow:0;
        font-size: 15px;
        font-variant: normal;
    }
    
      #navMenu ul ul {
        visibility:hidden;
        top:32px;
        width: 120px;
        font-style: italic;
        position: absolute;
        margin-left: -20px;
        text-indent: 9px;
        text-align: center;
     }
    
      #navMenu ul li:hover ul {
        visibility:visible;
        z-index:9999;
        
     }
    
      /**********************************************/
    
      /*sets top level hover color*/
    
      #navMenu li:hover {
        font-weight: bold;
        font-style: italic;
     }
    
      /*sets link items hover color and background*/
    
      #navMenu ul li:hover ul li a:hover {
        color:#000;
        background-color: #E71923;
        width: 120px;
     }
    
      /* Changes text color on hover for main menu hover*/
    
      #navMenu a:hover {
        color:#FFF;
     } 
      
     /* Contains the Float */
    
     .clearFloat {
        clear:both; 
        margin:0;
        padding:0;
     }
    
    #navMenu #holder ul li{
        display:inline;
        float:left;
        clear:left;
    }

    Please if you guys can help it would be awesome thank you
    Attached Thumbnails Attached Thumbnails CSS and IE drop down-problem.jpg  

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,806
    Thanks
    41
    Thanked 199 Times in 198 Posts
    for any interested the site is http://www.dynamitedogtraining.com/

    i saw the issue. there are a few issues it could be... personally i think it is due to you nav menu "layout"...
    you have a <ul> set for each <li> and then inside the <li>'s you have random <ul></ul> ... idk why that is there or if it is remnants from old code or... i would remove those... also some of your li's have positioning... i am assuming that is for ur drop down menu but idk... if not then get rid of it... if all your li's are floated then they will all fall into place... i do though think that the primary issue is due to the
    Code:
     <ul> 
     
         <li><a href="home.html">Home</a> 
           <ul> 
       
           </ul> <!-- end inner UL --> 
     
     
      </li> 
         <!-- end main LI --> 
     
      </ul> <!-- end main UL --> 
      
        <ul> 
     
         <li><a href="aboutus.html">About</a> 
       
           <ul> 
     
           </ul> <!-- end inner UL --> 
     
     
      </li> 
         <!-- end main LI --> 
     
        </ul> <!-- end main UL -->
    that is all extra... you can have just

    Code:
    <ul>
      <li> link one </li>
      <li> link two </li>
      <li> link etc  </li>
    </ul>

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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