Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pure HTML + CSS drop down nav bar dosn't work in IE 7

    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

    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:
    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,ScreenY=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:
    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)


    This is how it looks in IE 7 (bad)


    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!
    Last edited by BrassMonkey1010; 02-10-2012 at 04:00 PM.

  • #2
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind, I figured it out, had some bad code/mixed up stuff and it is all good now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •