...

View Full Version : CSS and IE drop down



Solbester
08-05-2011, 03:01 AM
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:


<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

alykins
08-05-2011, 05:42 AM
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


<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



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum