Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 08-05-2011, 02:01 AM   PM User | #1
Solbester
New to the CF scene

 
Join Date: Aug 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Solbester is an unknown quantity at this point
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
Click image for larger version

Name:	problem.jpg
Views:	22
Size:	49.7 KB
ID:	10149  
Solbester is offline   Reply With Quote
Old 08-05-2011, 04:42 AM   PM User | #2
alykins
Senior Coder

 
alykins's Avatar
 
Join Date: Apr 2011
Posts: 1,608
Thanks: 37
Thanked 183 Times in 182 Posts
alykins will become famous soon enough
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
alykins is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:00 PM.


Advertisement
Log in to turn off these ads.