CSS and IE

HTML & CSS
1

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 page problem image is attached

Here’s the HTML 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:

#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

2

Hi Solbester, welcome to SitePoint!

I’m going to be all nasty for just a bit and critique your code… then later I’ll ask you want you want to do about it.
Here goes.

Your markup is actually a bit screwed up.

You only want ONE main ul for that whole menu. Not many.


  <ul>

     <li><a href="home.html">Home</a>
       <ul>
   
       </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

  </ul> <!-- end main UL -->
etc...

should be


  <ul>
    <li><a href="home.html">Home</a></li> 
    <li>< href="aboutus.html">About</a></li>
    <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>
    </li><!-- end Victoria-->
    <li><a href="photos.html">Photos</a></li>
    <li><a href="links.html">Links</a></li>
    <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>
    </li><!--end Training-->
    <li><a href="http://dynamitedogtraining.blogspot.com/">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul><!--end single main navigation-->

And, I can see your images aren’t lining up… also, without images enabled (or if they don’t load for some reason) your menu becomes invisible.
I’d have that top block have a background colour of #333 and then let one giant background image cover that up if people do load images. Set a min-height on that box. Give the menu a top padding in pixels to push it down to exactly the level of the leash part of the background image.

Also without images there’s no other information either… you’re using longdesc very incorrectly!


<img src="images/Home_top_07.jpg" width="142" height="60" border="0" longdesc="images/Home_top_07.jpg" />

That’s neither what longdesc is for nor how you use it. Longdesc you can forget about for your page because it’s for when you have some very complicated image like a chart or a graph that needs like a paragraph to explain… so longdesc is supposed to link to your text file or some other web page which has all that text explaining the information in the image. It’s pretty cool for comics for example.
But what you want is alt. Alt is where you’d put the text that’s in your image…

But, in this case, I think what you’d do best with is regular HTML with plain text in it for your site name and the free consultation bit, and we’d layer the image right over most of it. That way, it doesn’t matter if there are images or not, Google will be able to see it and anyone not loading images too. Plus, if it’s just one big image, that’s only one call to the server for it.

Your Transitional doctype is letting you get away with nasty tags like font and center. And, yeah, you don’t need those tables either.

Okay, that was my critique.

So, what do you want? Do you want a kludge that might make the menu work in all browsers and leave everything else the way it is (you’d still want to use the new menu code above either way since I don’t see any good way to get what you have working in IE)? Or are you interested in making your page better in all kinds of awesome ways?

I don’t know how much you care about search engines but your site could improve for them a whole lot. For example adding text to the images that are text, and giving your page structure with header tags. This would also increase the accessibility of your page to users who are either using non-Desktops, aren’t loading images for some reason (bandwidth is usually the reason), slow connections, or are visually impaired and using software to read your page.

If you’re interested in this I (or anyone) can do an example rewrite for you and explain what and why that you can use, since we think it’s cool if someone walks away from here knowing more about front-end coding, and it’ll benefit your users and probably make cross-browser styling much easier in the future.

Let us know.

3