tqla Posted January 26, 2008 Share Posted January 26, 2008 Hello. I am using the following horizontal menu with dropdown and it works fine in FireFox but the dropdown doesn't work in IE (no surprise there). Can someone help me get this to work in IE7 too? Thanks. Menu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <link rel="stylesheet" type="text/css" href="css/menu_style.css" /> </head> <body> <DIV ID="Container"> <ul id="navigation-1"> <li><a href="#" title="Home">Home</a> <ul class="navigation-2"> <li><a href="#" title="Electric Guitars">Electric Guitars</a></li> </ul> </li> <li><a href="#" title="Products">Products</a> <ul class="navigation-2"> <li><a href="#" title="Electric Guitars">Electric Guitars</a></li> <li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a> <ul class="navigation-3"> <li><a href="#" title="Six String">Six String</a></li> <li><a href="#" title="Twelve String">Twelve String</a></li> </ul> </li> <li><a href="#" title="Bass Guitars">Bass Guitars</a></li> <li><a href="#" title="Accessories">Accessories <span>»</span></a> <ul class="navigation-3"> <li><a href="#" title="Guitar Stands">Guitar Stands</a></li> <li><a href="#" title="Strings">Strings</a></li> <li><a href="#" title="Tuners">Tuners</a></li> <li><a href="#" title="Plectrums">Plectrums</a></li> <li><a href="#" title="Capos">Capos</a></li> <li><a href="#" title="Cases">Cases</a></li> <li><a href="#" title="Straps">Straps</a></li> </ul> </li> </ul> </li> <li><a href="#" title="Your Account">Your Account</a> <ul class="navigation-2"> <li><a href="#" title="Log In">Log In</a></li> <li><a href="#" title="Register">Register</a></li> </ul> </li> <li><a href="#" title="Help">Help</a> <ul class="navigation-2"> <li><a href="#" title="FAQs">FAQs</a></li> <li><a href="#" title="Forum">Forum</a></li> <li><a href="#" title="Contact Us">Contact Us</a></li> </ul> </li> <li><a href="#" title="Blah">Links</a> <ul class="navigation-2"> <li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li> <li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li> <li><a href="#" title="Shure">Shure</a></li> <li><a href="#" title="International">International <span>»</span></a> <ul class="navigation-3"> <li><a href="#" title="Musican's Friend">Musican's Friend</a></li> <li><a href="#" title="Thomann Music">Thomann Music</a></li> <li><a href="#" title="Turnkey">Turnkey</a></li> </ul> </li> </ul> </li> </ul> </DIV> </body> </html> CSS #Container { position:absolute; left:70px; top:151px; width:686px; height:37px; } h1 { width:686px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; } p { margin:0; padding:1.2em; } p a:link, p a:visited, p a:hover, p a:active { font-weight:bold; color:#b9121b; } ul#navigation-1 { margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:0px solid #b9121b; border-bottom:0px solid #b9121b; font:normal 8pt verdana, arial, helvetica;} ul#navigation-1 li { margin:0; padding:0; display:block; float:left; position:relative; width:100px; } ul#navigation-1 li a:link, ul#navigation-1 li a:visited { padding:10px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:100px; height:37px; } ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active { padding:10px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:100px; height:13px; border-left:0px solid #ffffff; border-right:0px solid #ffffff; } ul#navigation-1 li ul.navigation-2 { margin:0; padding:16px 1px 0; list-style:none; display:none; background:; width:100px; position:absolute; top:21px; left:-1px; border:0px solid #b9121b; border-top:none; } ul#navigation-1 li:hover ul.navigation-2 { display:block; } ul#navigation-1 li ul.navigation-2 li { width:100px; clear:left; width:100px; } ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited { clear:left; background:#b9121b; padding:4px 0; width:100px; border:none; border-bottom:0px solid #ffffff; position:relative; z-index:1000; } ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover { clear:left; background:#ec454e; padding:4px 0; width:100px; border:none; border-bottom:0px solid #ffffff; position:relative; z-index:1000; } ul#navigation-1 li ul.navigation-2 li ul.navigation-3 { display:none; margin:0; padding:0; list-style:none; position:absolute; left:100px; top:-2px; padding:1px 1px 0 1px; border:0px solid #b9121b; border-left:0px solid #b9121b; background:; z-index:900; } ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 { display:block; } ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited { background:#b9121b; } ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active { background:#ec454e; } ul#navigation-1 li ul.navigation-2 li a span { position:absolute; top:0; left:90px; font-size:12pt; color:#fe676f; } ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span { position:absolute; top:0; left:90px; font-size:12pt; color:#ffffff; } Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted January 26, 2008 Share Posted January 26, 2008 First, you are using invalid xhtml. This is another reason why xhtml is dangerous. If you changed your doctype to html 4.01 strict, and removed the xhtml closing tags, your code would be valid. If you insist on using XHTML (particularly strict), then you better KNOW and FOLLOW the rules. Unlike html (which is more forgiving of things like this), in xhtml ALL markup tags must be lowercase - the following invalidates the page: <DIV ID="Container"></DIV> Basically that's like putting a full Bixby tailpiece on a Strat, or a Fender Tremelo bridge on a LesPaul ... it just doesn't work. That said, it isn't you're problem though (it happens in IE6, too). You have a "HasLayout" issue. But the way you coded all those id and class #navigation ul and li selects confused the hell out of me when trying to fix this quick - and I spent a good half hour trying! Came close, but that was nearly rewriting the whole code. bronzemonkey is a wiz with spotting HasLayout and could probably see your main issue at a glance. I'll IM him and point him here. Um ... wait! If I fix it do I win a '59 LesPaul Standard? Okay, I'll settle for a re-issue. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted January 26, 2008 Share Posted January 26, 2008 I've found a solution for you but it was pretty heavy going wading through your css file. It's packed with redundant or unnecessary code as well as a couple of parse errors. I'd also recommend that you shorten your list class names to something more practical and meaningful (e.g., nav, sub1, sub2 rather than navigation-1, navigation-2, navigation-3) just to make your life easier. Rather than using {display:none} just position the drop lists offscreen. I also removed some useless padding. ul#navigation-1 li ul.navigation-2 {margin:0; padding:16px 0 0; list-style:none; width:100px; position:absolute; top:21px; left:-9000px; border:0px solid #b9121b; border-top:none;} ul#navigation-1 li:hover ul.navigation-2 {left:0;} ul#navigation-1 li ul.navigation-2 li ul.navigation-3 {margin:0; padding:0; list-style:none; position:absolute; left:-9000px; top:0; z-index:900;} ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {left:100%;} There seems to be an IE7 bug lying in there, even after the whole thing is cleaned up, to do with the display:none/block switch. Once you've revealed the second sub list the backgrounds of the links in the second sub list will show up when the first sub list is revealed again. It can be avoided either by simply positioning the lists offscreen rather than using display:none, or by adding another set of declarations for the links of the second sub list so that they are also {display:none} and then switched to {display:block;} when the second sub list is revealed. There might a reason for this bug but I couldn't see it immediately. Quote Link to comment Share on other sites More sharing options...
tqla Posted January 27, 2008 Author Share Posted January 27, 2008 Thanks dbrimlow and bronzemonkey. I took your advice, got out of strict and cleaned up the code. Works now. I'm wondering though if I should just do it in javascript. I was trying to do a 100% css menu without being an expert in css. Quote Link to comment Share on other sites More sharing options...
tqla Posted January 27, 2008 Author Share Posted January 27, 2008 actually I'm still stuck but I'm prolly gonna bail on the idea. I'm reading up on the "HasLayout" issue here http://www.satzansatz.de/cssd/onhavinglayout.html to see what I can figure out. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted January 27, 2008 Share Posted January 27, 2008 Really, it wasn't a half bad attempt, and it would have worked had it not had a second drop-down level that seemed to trigger some bizarre IE7 behaviour. How are you still stuck? The code I posted should fix the problems. Using Javascript means that people have to have js enabled to use the menu. However, you do realise that the menu won't work in IE6 right? Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted January 27, 2008 Share Posted January 27, 2008 When I started rewriting it, I first eliminated the classes ".navigation" altogether and just used the secondary list levels of "ul ul li" or "ul ul ul li" with the main select id (#navigation ul, #navigation ul ul li, etc.) I just wanted to get an initial handle on the css. I then eliminated the pseudo level a tags (a:link, a:visited and a:active) and just used "a" and li:hover & li a:hover. I then gave them has layout. This fixed the haslayout in IE 6 and the second and third drop down levels showed but, of course, it threw off the whole inline scheme of the initial top level select. That's when I realized that all of the select's elements needed to be re-written because they were interfering with each other. It was at that point that I realized this was going to be a monstor fix and complete re-write. HOWEVER! getting full cross-browser drop down menus like this to work is absolutely crucial for css to replace javascript. Way too many people give up because of IE 7. I'm going to play with this some more. Quote Link to comment Share on other sites More sharing options...
tqla Posted January 27, 2008 Author Share Posted January 27, 2008 I am stuck in that this menu is to be a php include into all of the other pages on the site (I change the name to mainmenu.php) Funny thing, the dropdown works in ie7 on it's own until I include it and then no worky. Thank you both. I'm encouraged to continue. Come to think of it, I can ace the second and third dropdowns, they were just icing and not really necessary. Yes, I know about the pitfalls a javascript. Bummer there too. dbrimlow, I am interested to see what you come up with. Thanks again. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted January 28, 2008 Share Posted January 28, 2008 It will not be exactly the same as most examples because as bronzemonkey pointed out, IE 6 doesn't support li:hover (and I hate using markup level conditional comments). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.