SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css drop down not working in IE6

    I'm working on a drop down menu for a site I'm developing, and although I can get it to function properly in IE7+ and FF, no matter what method I try I can't get the drop down to function properly in IE6. Can anyone help out with this?

    The site can be found at: http://leaf.mreh.net/uploads/bsmc

    CSS relative to the drop down menu can be found at: http://leaf.mreh.net/uploads/bsmc/style.css

    The drop down menu code is marked in the css file. Thanks in advance for any help you can give me.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 does not recognise :hover on anything other than link anchors, which is why the nested tables are inside the <a>s via conditional comments solely for IE6 - the css to display the dropdowns has to also be activated on hover of the <a> for IE6. Suggest looking closely at the css for Stu Nicholls' original examples (where I assume you got the code for this).

  3. #3
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    His code didn't seem to mesh well with my top level roll overs, so I didn't pull the code directly from his work, but I used it to try to figure out how to do it myself. I tried using some of the methods he did, but none of them really did anything. So I can't figure out for the life of me what I'm doing wrong.
    Last edited by yotamono; Apr 3, 2009 at 03:24.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Had a play with this locally, and got it sorted. The thing to note with this menu setup is that for all browsers except IE6 the dropdown <ul>s are nested within the top level <li>s, but in IE6, due to the conditional comments, they are nested within tables within the top level <a>s instead (actually illegal nesting but IE6 is ok with it and this acceptance forms the basis of the method). This means the dropdowns are activated by :hover on the <li>s in decent browsers, but must be activated by :hover on the <a>s for IE6, and the rules may be combined with multiple selectors.

    A few things I don't like about Stu's css :
    * Using display:none to initially hide the dropdowns makes the menu inaccessible to screen readers. A better way is to position the dropdown off the left of the screen. Some methods use the "left" property to do this, but using a negative left margin works better for IE7.
    * Applying styles for the dropdowns only on hover seems like it would give the browser more work to do - I prefer to set up all dropdown styling and position first so that all the hover has to do is move the dropdown into view.

    On the subject of accessibility, the top level menus should contain text, which can be hidden via the css. Therefore, the html for the menu can be :
    Code:
    <div class="menu">
    	<ul>
    		<li class="home"><a href="index.html">Home</a></li>
    		<li class="history"><a href="history.html">History</a></li>
    		<li class="soldiers"><a href="soldiers.html">Soldiers<!--[if IE 7]><!--></a><!--<![endif]-->
    		<!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li><a href="soldiers.html">Montgomery Chapter Officers</a></li>
    				<li><a href="junior.html">Junior Officers</a></li>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    		<li class="members"><a href="membership.html">Membership<!--[if IE 7]><!--></a><!--<![endif]-->
    		<!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li><a href="membership.html">Membership Eligibility</a></li>
    				<li><a href="application/">Application</a></li>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    		<li class="gallery"><a href="gallery.html">Gallery</a></li>
    		<li class="safety"><a href="safety/">Safety<!--[if IE 7]><!--></a><!--<![endif]-->
    		<!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li><a href="safety/">Motorcycle Safety</a></li>
    				<li><a href="safety/lanes.html">Changing Lanes</a></li>
    				<li><a href="safety/signals.html">Signals</a></li>
    				<li><a href="safety/staggered.html">Staggered</a></li>
    				<li><a href="safety/alcohol.html">Alcohol</a></li>
    				<li><a href="safety/stopping.html">Stopping</a></li>
    				<li><a href="safety/captain.html">Road Captain</a></li>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    		<li class="events"><a href="#">Events<!--[if IE 7]><!--></a><!--<![endif]-->
    		<!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>
    				<li><a href="events/riding.html">Riding Events</a></li>
    				<li><a href="events/military.html">Military Events</a></li>
    				<li><a href="events/charity.html">Charity Events</a></li>
    				<li><a href="events/annual.html">Annual Events</a></li>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		</li>
    	</ul>
    </div>
    Css next post ....

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css I used for this is (replace your existing css rather than trying to find the differences and modify it) :
    Code:
    .menu { 
    	padding: 95px 0 0 40px; 
    	position: relative; 
    	z-index: 100;
    }
    .menu ul {
    	height: 36px;
    }
    .menu li {
    	list-style: none; 
    	float: left; 
    	position: relative;
    }
    .menu li a {
    	float:left;
    	background:url(images/menu.gif) no-repeat;
    	height:36px;
    	font-size: 1px;
    	color: #171717;
    	border-top-width: thin;
    }
    .menu li ul {
    	position: absolute;
    	top: 35px;
    	left: -10px;
    	width: 140px;
    	margin-left: -999em;
    }
    .menu li li {
    	float: none;
    }
    .menu li li a {
    	display: block;
    	background: #171717;
    	color: #fff;
    	height: auto;
    	line-height: 1.3em;
    	padding: 4px 10px;
    	border-width: 0 1px 1px 1px;
    	border-color: #343434;
    	border-style: solid;
    	width:120px !important;
    	float: none;
    	font-size: 12px;
    }
    .menu li li a:hover {
    	background: #fdb22e; 
    	color: #000; 
    }
    .menu li:hover ul, .menu a:hover ul {
    	margin-left: 0px;
    }
    .menu ul li:hover ul ul, .menu a:hover ul ul {
    	margin-left: -999em
    }
    .menu ul ul li:hover ul, .menu ul ul a:hover ul {
    	margin-left: 105px;
    }
    
    .menu li.home a {width:81px; background-position: 0 0;}
    .menu li.history a {width:94px; background-position: -81px 0;}
    .menu li.soldiers a {width:96px; background-position: -174px 0;}
    .menu li.gallery a {width:92px; background-position: -270px 0;}
    .menu li.safety a {width:87px; background-position: -362px 0;}
    .menu li.links a {width:136px; background-position: -449px 0;}
    .menu li.events a {width:96px; background-position: -585px 0;}
    .menu li.members a {width:119px; background-position: -681px 0;}
    
    .menu li.home a:hover {background-position: 0 -36px;}
    .menu li.history a:hover {background-position: -81px -36px;}
    .menu li.soldiers a:hover {background-position: -174px -36px;}
    .menu li.gallery a:hover {background-position: -270px -36px;}
    .menu li.safety a:hover {background-position: -362px -36px;}
    .menu li.links a:hover {background-position: -449px -36px;}
    .menu li.events a:hover {background-position: -585px -36px;}
    .menu li.members a:hover {background-position: -681px -36px;}
    
    .menu table {border-collapse: collapse; position: absolute; top: 0; left: 0;}
    Main changes include setting the height and background image for the <a>s initially so that then each top item only needs the width and background position set, and the rollover hovers only need the background position - saves a whole heap of repeated styles. Also note the font size on the <a>s has been set to 1px high and coloured to hide it against the background.

    The dropdown <ul>s get the absolute position, coordinates and size, and are initially positioned off the screen with the negative left margin.

    The submenu <li>s get the float removed as do their <a>s, and the dropdown <a>s get rules to override those set on the top level. Note the !important rule as this overrides the individual widths specified by the top level class names. The submenu link hover rule only needs to list anything that actually changes.

    The dropdown hover is applied to the <li>s and <a>s and just sets the left margin.

  6. #6
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've really helped me out with this. At one point I did consider trying to change it to text and hide it somehow using css, but I got so frustrated with it that I was ready to just scrap it and start over altogether.

    There is one problem, though, and it's something I've encountered with this particular layout. Even though the hovers now work in ie6, the banner div seems to have stretched down to accommodate the drop downs, even when they are hidden. This pushes down the layout and creates a gap sometimes, and other times I have witnessed it stretching the banner instead. I've tried playing around with the heights and z-index, but nothing is fixing this and it's part of the reason why I thought the problem behind everything might be my nested menu. Here's a screenshot of the problem:

    http://leaf.mreh.net/uploads/bsmc/ss_ie6.jpg

    As you can see, on :hover it also stretches the width of the top level a's in the menu. Looks like it's stretching it to fit the drop downs. Disliking IE6 more and more everyday ._.;

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The unitpngfix.js javascript is causing this - it is overriding the absolute positioning on the nested table and dropdown <ul>s, but I'm not sure why. It would appear that none of the png graphics use alpha transparency, so this javascript can go. If you do need to support transparent png graphics, i would recommend the twinhelix script.

  8. #8
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I see. I do have transparent pngs in some places, although it's not as if I really need them there. I will give twinhelix a try. This also had the added benefit of fixing another problems I was having, so I really appreciate all the help. You don't know how stressed out I was getting with this. Thanks a lot.


Bookmarks

Posting Permissions

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