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

    Join Date
    Jul 2004
    Location
    San Diego, CA
    Posts
    57
    Rep Power
    38

    Question Drop down menus not appearing in IE7


    Hi all,

    I'm adding drop down menus to my company's site and have it working as I'd like in Firefox and Safari but the drop downs do not appear at all on IE7/Win. I've tried a lot of different things to fix it but I think I am missing some fundamental understanding here so it's all been shots in the dark. Any tips would be greatly appreciated! Thanks in advance.

    P.S. I realize the CSS might be a bit confusing at first glance - what it achieves is essentially just changing the positioning of the background image when hovered over to reveal the "hover state" of a particular menu choice.

    The menu in question is the horizontal bar near the top (MBA Programs, Faculty & Research, etc.)

    URL: http://rady.ucsd.edu/index-dev.html

    Relevant HTML:

    Code:
    <ul id="nav-main" class="home">
    			<li id="mba"><a href="/mba/">MBA Programs</a>
    				<ul>
    					<li class="first-item"><a href="/mba/fulltime/">Full-Time MBA</a></li>
    					<li><a href="/mba/flex/">FlexMBA</a></li>
    					<li><a href="/mba/admissions/">Admissions</a></li>
    					<li><a href="/mba/careers/">MBA Career Connections</a></li>
    					<li><a href="/mba/profiles/">Student &amp; Alumni Profiles</a></li>
    					<li><a href="/mba/organizations/">Student Organizations</a></li>
    					<li><a href="/mba/seminars/">Professional Seminars</a></li>
    					<li><a href="/mba/mentors/">Executive Mentors</a></li>
    					<li class="last-item"><a href="/mba/speakers/">Executive Speakers</a></li>
    				</ul>
    			</li>
    			<li id="faculty"><a href="/faculty/">Faculty &amp; Research</a>
    				<ul>
    					<li class="first-item"><a href="/faculty/directory/">Faculty Directory</a></li>
    					<li><a href="/faculty/research/">Research Areas</a></li>
    					<li><a href="/faculty/seminars/">Research Seminars</a></li>
    					<li><a href="/faculty/recruiting/">Faculty Recruiting</a></li>
    					<li class="last-item"><a href="faculty/postdoctoral/">Postdoctoral Research</a></li>
    				</ul>
    			</li>
    			<li id="exec"><a href="/exec/">Executive Development</a>
    				<ul>
    					<li class="first-item"><a href="/exec/custom/">Custom Programs</a></li>
    					<li><a href="/exec/open/">Open Enrollment Programs</a></li>
    					<li><a href="/exec/learn/">Learning Consortium</a></li>
    					<li><a href="/exec/leadership/">Leadership Assessment</a></li>
    					<li><a href="/exec/align/">Align Executive Series</a></li>
    					<li class="last-item"><a href="/exec/faq/">Frequently Asked Questions</a></li>
    				</ul>
    			</li>
    			<li id="corporate"><a href="/corporate/">Corporate Connections</a></li>
    			<li id="news"><a href="/news/">News &amp; Events</a>
    				<ul>
    					<li class="first-item"><a href="/news/releases/">News Releases</a></li>
    					<li><a href="/news/media-coverage/">Media Coverage</a></li>
    					<li><a href="/news/faculty-experts/">Faculty Experts</a></li>
    					<li class="last-item"><a href="/news/newsletter/">Newsletter</a></li>
    				</ul>
    			</li>
    			<li id="invest"><a href="/invest/">Invest in Rady</a>
    				<ul>
    					<li class="first-item"><a href="/invest/edge/">Corporate EDGE</a></li>
    					<li><a href="/invest/venture-fund/">Dean's Venture Fund</a></li>
    					<li><a href="/invest/fellowships/">Endowed Fellowships</a></li>
    					<li class="last-item"><a href="/invest/chairs/">Endowed Chairs</a></li>
    				</ul>
    			</li>
    			<li id="alumni"><a href="http://alumni.rady.ucsd.edu">Alumni Relations</a></li>
    			<li id="undergrad"><a href="/undergrad/">Undergraduate</a>
    				<ul>
    					<li class="first-item"><a href="/undergrad/courses/">Courses</a></li>
    					<li class="last-item"><a href="/undergrad/course-readers/">Course Readers</a></li>
    				</ul>
    			</li>
    			<li id="about"><a href="/about/">About</a>
    				<ul>
    					<li class="first-item"><a href="/about/welcome/">Welcome</a></li>
    					<li><a href="/about/staff/">Our Staff</a></li>
    					<li><a href="/about/campus/">Our Campus</a></li>
    					<li><a href="/about/sandiego/">Life in San Diego</a></li>
    					<li><a href="/about/dean/">About the Dean</a></li>
    					<li><a href="/about/athena/">Athena</a></li>
    					<li class="last-item"><a href="/about/beyster/">Beyster Institute</a></li>
    				</ul>
    			</li>
    		</ul>
    Relevant CSS:

    Code:
    	#nav-main { width: 903px; clear: both; list-style: none; padding: 0 0 2em 0; float: left; position: relative; }
    	#nav-main.home { padding-bottom: 0; }
    	
    		#nav-main li { float: left; padding: 0; margin: 0; text-indent: -9000px;}
    		
    		#nav-main li ul { position: absolute; list-style: none; }
    		
    		#nav-main li ul li { display: none; text-indent: 0px; }
    		
    		#nav-main li ul li a { font-size: 11px; line-height: 1.1; height: 20px; padding-left: 9px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }
    
    		#nav-main li:hover ul li { display: block; }
    		
    		#nav-main ul li a { padding-left: 0px; padding-right: 12px; }
    		
    		#nav-main li ul li.first-item a { padding-top: 10px; }
    		#nav-main li ul li.last-item a { padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }
    		
    		#nav-main li ul a, #nav-main li ul a:hover { width: 150px; background: #fafafa; }
    	
    		#mba ul li a, #mba ul li a:hover { width: 155px; }
    		#faculty ul li a, #faculty ul li a:hover { position: relative; left: 2px; width: 137px; }
    		#exec ul li a, #exec ul li a:hover { position: relative; left: 4px; width: 172px; }
    		#corporate ul li a, #corporate ul li a:hover { position: relative; left: 2px; width: 200px; }
    		#news ul li a, #news ul li a:hover { position: relative; left: 3px; width: 117px; }
    		#invest ul li a, #invest ul li a:hover { position: relative; left: 2px; width: 139px; }
    		#undergrad ul li a, #undergrad ul li a:hover { position: relative; left: -1px; width: 117px; }
    		#about ul li a, #about ul li a:hover { position: relative; left: -73px; width: 107px; text-align: right; }
    	
    		#mba a, #faculty a, #exec a, #corporate a, #news a, #invest a, #alumni a, #undergrad a, #about a { display: block; height: 34px; background: url(../images/nav.gif) no-repeat 0 0; }
    
    		#mba a { width: 105px; }
    		#mba a:hover, #mba.current a { background-position: 0px -34px; }
    		#faculty a { width: 127px; background-position: -105px 0; }
    		#faculty a:hover, #faculty.current a { background-position: -105px -34px; }
    		#exec a { width: 152px; background-position: -232px 0; }
    		#exec a:hover, #exec.current a { background-position: -232px -34px; }
    		#corporate a { width: 150px; background-position: -384px 0; }
    		#corporate a:hover, #corporate.current a { background-position: -384px -34px; }
    		#news a { width: 107px; background-position: -534px 0; }
    		#news a:hover, #news.current a { background-position: -534px -34px; }
    		#invest a { width: 59px; background-position: -641px 0; }
    		#invest a:hover, #invest.current a { background-position: -641px -34px; }
    		#alumni a { width: 64px; background-position: -700px 0; }
    		#alumni a:hover, #alumni.current a { background-position: -700px -34px; }
    		#undergrad a { width: 82px; background-position: -764px 0; }
    		#undergrad a:hover, #undergrad.current a { background-position: -764px -34px; }
    		#about a { width: 57px; background-position: -846px 0; }
    		#about a:hover, #about.current a {background-position: -846px -34px; }
  2. #2
  3. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,323
    Rep Power
    0
    explorer no likey:

    Code:
    #nav-main li:hover ul li { display: block; }
    explorer no likey the :hover pseudo class on anything but links, unless you use one of these:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html/DTD/html401-transitional.dtd">
    which should make it work, at least for IE7; can't guarantee it for earlier versions.

    HTH - derelict
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Location
    San Diego, CA
    Posts
    57
    Rep Power
    38
    I'd read that before but wasn't sure if it applied only to IE6 or IE7 as well. I tried changing the doctype to the one you suggested but that didn't seem to make it work by itself.

    If I understand this correctly, getting around IE's lack of support for :hover can be achieved through the JavaScript example here: http://htmldog.com/articles/suckerfish/dropdowns/. I added that in to my page and it still doesn't work. Did I implement the JavaScript incorrectly or is there some other complication in my menus that keep that script from working?

    Thanks again!
  6. #4
  7. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,323
    Rep Power
    0
    granted, I was only testing with a background color on an LI, but adding the doctype (with or without forced layout on the LIs) seemed to make 100% of the difference between :hover being ignored and :hover being fully implemented on the LI.

    try removing the JS, in case it's messing with something? and/or try adding

    Code:
    li { zoom:1; }
    to force layout on all LIs?

    otherwise, perhaps one wiser than me can illuminate the subject for us both. I've seen all kinds of links to css-only dropdowns here and elsewhere, try using the forum search if this drop down is giving you that much grief.

    HTH - derelict
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Location
    San Diego, CA
    Posts
    57
    Rep Power
    38
    I've narrowed it down quite a bit. I discovered that if I remove the -9000px text-indent from #nav-main li, the drop downs appear in IE7, which means that they had been appearing all along, just 9000 pixels off the edge of the screen. #nav-main li ul li is specifically given a text-indent of 0px, but IE seems to either ignore this or interpret it as meaning something else. I just need to figure out how to stop IE from inheriting the -9000px offset.
  10. #6
  11. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Why don't you just set a higher (lower then 9000, like 800) text indent. It seems to be moving too far to the left if you think about it. Just changing the number on there should work. IE7 might be inheriting it.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Location
    San Diego, CA
    Posts
    57
    Rep Power
    38
    Strangely, specifying text-indent: 0px for the incorrectly-inherited ids didn't have any effect, but left: 0px did. It's now working correctly. Thanks for all the help!
  14. #8
  15. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Your problem was that it was too far left and was out of browser screen. Why did you have a -9000 text indent? left: 0 puts the offset of the left edge of a positioned element.

IMN logo majestic logo threadwatch logo seochat tools logo