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.
Here's what the page looks like in IE:
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
It would be awesome if you
It would be awesome if you could give a brief written explanation of what is happening, it's not hugely clear from the SC, you should really always explain what is happening even if an image or site link is available.
One thing to try though is remove the visibility hidden on the ul ul the usual approach is to use the offset to shift off screen i.e left: -999em;
Also when you say older browsers you must define older, do you mean IE6 ? in which case no the menu dropdown won't work as IE6 doesn't activate hover on anything but anchors, you have to have a scripted solution for IE6.
And it would be super-awesome
And it would be super-awesome if you gave us ALL the code.