#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    Albany, NY
    Posts
    89
    Rep Power
    21

    Navigation background-position not working in IE


    I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px.

    I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions.

    Thanks for your help!

    Open in FF to see how it's supposed to work:
    Open in IE to see problem.

    Here's the HTML

    Code:
    <div id="Menu">
    <div id="nav_header">
    
       <div id="text">
    
                
    		    Admissions &amp; Financial Aid
    
                </div>
    
    
    </div>
    
    <ul id="nav_level_1">
    
             <li id="submenu"><a href="../index.php">Applying to Union</a></li>
    
    			<ul id="nav_level_2">
    
                   <li id="nav_active"><a href="index.php">Types of Admission</a></li>
    
    			<ul id="nav_level_3">
    
                   <li><a href="Transfer.php">Transferring to Union</a></li>
    
             <li><a href="Early.php">Early Decission</a></li>
    
    
             <li><a href="Regular.php">Regular</a></li>
    
             <li><a href="international.php">International Admission</a></li>
    
             <li><a href="aop_heop.php">AOP/HEOP</a></li>
    
             <li><a href="Medical.php">Eight-year Medical</a></li>
    
             <li><a href="Law.php">Six-year Law</a></li>
    
             <li><a href="MBA.php">Five-year MBA</a></li>
    
    
             <li style="line-height:0px;font-size:0px;">&#160;</li>
    
    		 </ul>
    
    			<li><a href="../Applications.php">Apply Online</a></li>
    
             <li><a href="../Forms/index.php">Download Application Materials</a></li>
    
             <li style="line-height:0px;font-size:0px;">&#160;</li>
    
    		 </ul>
    
                <li><a href="../../FAQs/index.php">Have a Question?</a></li>
    
    
             <li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>
    
             <li><a href="../../Events/index.php">Events/Programs &amp; Visiting</a></li>
    
             <li><a href="../../interviews.php">Interviews</a></li>
    
             <li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>
    
             <li><a href="../../About/index.php">Admissions Staff</a></li>
    
    
             <li><a href="../../AlumniAdmissions/index.php"></a></li>
    
             <li><a href="../../Media/index.php"></a></li>
    
             <li><a href="/union/admissions/Viewbook/index"></a></li>
    
             <li><a href="/union/admissions/Alumni/index"></a></li>
    
             <li><a href="../../sample.php"></a></li>
    
             <li style="line-height:0px;font-size:0px;">&#160;</li>
    
    		 </ul>
    
       
    
    </div>
    Here is the pertinent CSS

    Code:
    /* Style for three levels of unordered lists */
    #Menu #nav_level_1 {
        list-style-type:none;
        width: 200px;
        margin-left: 0px;
        padding-left: 0px;
        margin-top: 0px;
        padding-top: 0px;
        background-color: #d2c6aa;
        line-height:17px;
        word-wrap: break-word;
    }
    
    #nav_level_2 {
        list-style-type:none;
        width: 200px;
        margin-left: 0px;
        padding-left: 0px;
        margin-top: 0px;
        padding-top: 0px;
        background-color:#ded4bc;
        line-height:17px;
        word-wrap: break-word;
    }
    
    #nav_level_3 {
        list-style-type:none;
        width: 200px;
        margin-left: 0px;
        padding-left: 0px;
        margin-top: 0px;
        padding-top: 0px;
        background-color:#e5dece;
        line-height:17px;
        word-wrap: break-word;
    }
    /* End unordered list base styles */
    
    /* To get indented, wrapping, text that's cross browser compatible
       we need to additionally style the unordered lists and line items under each top <ul>
    */
    
    #nav_level_1 li {
        margin-left:20px;
    }
    
    #nav_level_1 li ul {
        margin-left:-20px;
    }
    
    #nav_level_2 li {
        margin-left: 40px;
    }
    
    #nav_level_2 li ul {
        margin-left:-40px;
    }
    
    #nav_level_3 li {
        margin-left:60px;
    }
    
    #nav_level_1 #nav_active {
        background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
        background-repeat: no-repeat;
        background-position: 4px;
        background-color: #f2ede1;
        margin-left:0px;
        padding-left: 20px;
    }
    
    #nav_level_2 #nav_active {
        background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
        background-repeat: no-repeat;
        background-position: 24px;
        background-color: #f2ede1;
        margin-left:0px;
        padding-left: 40px;
    }
    
    #nav_level_3 #nav_active {
        background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
        background-repeat: no-repeat;
        background-position: 44px;
        background-color: #f2ede1;
        margin-left:0px;
        padding-left: 60px;
    }
    
    #Menu #submenu {
        list-style-type: circle;
        padding-left: 0px;
        margin-top: 0px;
        padding-top: 0px;
        background-color:#d2c6aa;
        line-height:17px;
        word-wrap: break-word;
    }
    
    #submenu2 {
        list-style-type:circle;
        margin-left: 0px;
        padding-left: 0px;
        margin-top: 0px;
        padding-top: 0px;
        background-color:#ded4bc;
        line-height:17px;
        word-wrap: break-word;
    }
    Last edited by Techwhore; August 28th, 2007 at 02:11 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2001
    Location
    Cape Town
    Posts
    573
    Rep Power
    21
    I cant open that page
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    Albany, NY
    Posts
    89
    Rep Power
    21
    Sorry about that. I've just inserted the HTML in question instead of using the link...
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2001
    Location
    Cape Town
    Posts
    573
    Rep Power
    21
    What version of Ie you using cause I dont see it. Im using ie6
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    Albany, NY
    Posts
    89
    Rep Power
    21
    I'm on 7, should have specified.

IMN logo majestic logo threadwatch logo seochat tools logo