...

View Full Version : Pure HTML + CSS drop down nav bar dosn't work in IE 7



BrassMonkey1010
02-10-2012, 03:56 PM
Hi guys, I have been trying to fix this problem for a couple days now and I am stumped. I am not really an advanced with web code and yet somehow I got put in charge of redesigning my employers website. So pardon my sloppy code :o

Recently I changed my employers website from a static navigation menu to a drop down nav menu. It displays perfectly in Firefox, Chrome, and Modern IE, but not in IE 7.

This is the HTML code:

<div class="menu-nav">
<ul>
<li><a href="#">Insurance Choices</a>
<ul>
<li><a href="auto-insurance.php" title="Vehicle, Truck, Motorcycle, Car Insurance">Auto</a></li>
<li><a href="homeowners-insurance.php" title="Homeowners &amp; Renters Insurance for your House">Home</a></li>
<li><a href="health-insurance.php" title="Competitive Health Insurance Quotes">Health</a></li>
<li><a href="life-insurance.php" title="Life Insurance - Term, Whole Life">Life</a></li>
<li><a href="medicare-insurance.php" title="Medicare Insurance">Medicare</a></li>
<li><a href="business-insurance.php" title="Insurance for your Company">Business</a></li>
</ul>
</li>

<ul>
<li><a href="#">Personal Services</a>
<ul>
<li><a href="pay-your-bill.php" title="Pay Your Bill">Pay Your Bill</a></li>
<li><a href="report-a-claim.php" title="Report a Claim">Report a Claim</a></li>
<li><a href="request-auto-id-card.php" title="Request Auto ID Card">Request Auto ID Card</a></li>
<li><a href="change-of-address.php" title="Change Your Address">Change Your Address</a></li>
<li><a href="http://auto.erieinsurance.com/Young-drivers-video.html" a href="http://auto.erieinsurance.com/Young-drivers-video.html" target="_blank" onclick="window.open( this.href, '', 'width=476,height=356'); return false" title="Young Driver Video">Young Driver Video</a></li>
<li><a href="general-inquiry.php" title="General Inquiry">General Inquiry</a></li>
</ul>

<li><a href="#">Business Services</a>
<ul>
<li><a href="pay-your-bill-business.php" title="Pay Your Bill">Pay Your Bill</a></li>
<li><a href="request-a-certificate.php" title="Request a Certificate">Request a Certificate</a></li>
<li><a href="request-business-auto-id-card.php" title="Request an Auto ID Card">Request Auto ID Card</a></li>
<li><a href="business-change-of-address.php" title="Change Your Address">Change Your Address</a></li>
<li><a href="general-inquiry.php" title="General Inquiry">General Inquiry</a></li>
</ul>


<li><a href="#">Who We Are</a>
<ul>
<li><a href="douple-agency.php" title="Anout Us">About Us</a></li>
<li><a href="staff.php" title="The Team">The Team</a></li>
<li><a href="community-involvement.php" title="Community Involvement">Community</a></li>
<li><a href="../downloads/douple newsletter.pdf" title="Douple Newsletter">Newsletter</a></li>
<li><a href="#" a href="javascript:;" onClick="window.open('http://www.elocallink.tv/vp6/spon-fcsa.php?sponid=U2RRYFI/BW5VZg==&fvm=1','elocallinktv','scrollbars=yes,resizable=yes,width=716,height=540,left=0,top=0,ScreenX=0,Scre enY=0');";" title="Our Video">Video</a></li>
</ul>

<li><a href="#">Contact Us</a>
<ul>
<li><a href="contact.php" title="Contact Us">Contact</a></li>
<li><a href="refer-a-friend.php" title="Refer a Friend">Refer a Friend</a></li>
<li><a href="general-inquiry.php" title="General Inquiry">General Inquiry</a></li>
</ul>
</div><!--end menu-nav-->


This is the CSS code:

.menu-nav {
width:750px;
height:32px;
list-style-type:none;
padding:0;
display:block;
margin:0 0 0 163px;}

.menu-nav ul {
list-style-type:none;}

.menu-nav li {
float:left;
position:relative;
list-style-type:none;}

.menu-nav ul li {
float:left;
position:relative;
list-style-type:none;}

.menu-nav ul li a {
display:block;
color:#fff;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:bold;
text-align:center;
height:24px;
width:132px;
background:url(../images/nav_btn2.jpg) no-repeat;
padding:8px 0 0 0;}

.menu-nav ul li ul {
display: none;}

.menu-nav ul li:hover ul {
display:
block;
position:
absolute;
top:32px;
left:-40px;
min-width:200px;
margin-top:-1px;
}

.menu-nav ul li:hover ul li a {
display:block;
color:#ffffff;
width:130px;
height:27px;
text-align: center;
border-bottom:1px solid #0e2b55;
border-top:1px solid #3f68ac;
background: #2d4c7b;
}

.menu-nav ul li ul li:first-child a {
border-top:none;}

.menu-nav ul li ul li:last-child a {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;}

.menu-nav li:hover ul li a:hover {
background:#0e2b55;
}

.menu-nav ul a:hover {background-position:0px -32px; z-index:50;}

This is how it looks in IE 8+ (good)
http://img.photobucket.com/albums/v323/Monkeyman1010/good.jpg

This is how it looks in IE 7 (bad)
http://img.photobucket.com/albums/v323/Monkeyman1010/bad.jpg

I am thinking that it has something with the <ul> and <li> in the html but I am not sure how to fix it. Thanks in advance!

BrassMonkey1010
02-10-2012, 04:33 PM
Never mind, I figured it out, had some bad code/mixed up stuff and it is all good now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum