Wed, 2009-04-29 21:35
Okay so I have a more or less verbatim use of the classic "A List Apart" CSS drop down menu. I have it setup and tested to work perfectly on FF, SF, & IE 5 & 6. I can not find a way to make it work right on IE 7. The main problem is that in the second level menu, only the text is being seen as a link, not the whole block. So it is almost impossible to mouse down thru the whole menu. If I add a width tag to the CSS file with a width 1px less than the width of the menu then it works more or les like it should except that now there is a 1-2px gap between each menu item and mousing over these gaps causes the menu to go out of focus and disappear.
I am attaching a link to the page and the code for the html and both CSS files along with the js file. (I am using a conditional statement in the header to send IE6, FF, & SF users to another .CSS file that works just fine) The ie7.css file is the one I am having trouble with. Please help me out here, I am about ready to punch the screen in.
Link:
http://www.crumpfirm.com/portfolio-test2.html
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Architects | Planners | Interior Designers - Portfolio</title> <meta name="keywords" content="corporate, architectural, design, portfolio, experience, memphis, interior, master, planning" /> <meta name="description" content="The Crump Firm, Inc. is an Memphis, TN based architectural, master planning, and interior design firm. " /> <script type="text/javascript" src="drop_down.js"></script> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 5px; background-color: #aba49e; } --> </style> <![if gte IE 7]> <link href="css/ie7.css" rel="stylesheet" type="text/css" /> <![endif]> <link href="css/ie6.css" rel="stylesheet" type="text/css" /> <link href="css/css_asset.css" rel="stylesheet" type="text/css" /> </head> <body> <table style="height: 510px;" width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody> <tr bgcolor="#FFFFFF"> <td height="100"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="150" height="100" rowspan="2" align="center" valign="middle"><img src="graphics/crumpfirmlogo.jpg" alt="The Crump FIrm, Inc." width="150" height="94" /></td> <td width="150" height="70" align="center" valign="bottom"> </td> <td width="150" height="70" align="center" valign="bottom"> </td> <td width="150" height="70" align="center" valign="bottom"> </td> <td width="150" height="70" align="center" valign="bottom"> </td> <td width="150" height="70" align="center" valign="bottom"> </td> </tr> <tr> <td width="150" height="30" align="center" valign="middle"><a href="profile.html" class="navbartd">firm profile</a></td> <td width="150" height="30" align="center" valign="middle"><a href="services.html" class="navbartd">services</a></td> <td width="150" height="30" align="center" valign="middle"><a href="portfolio.html" class="currentnav">portfolio</a></td> <td width="150" height="30" align="center" valign="middle"><a href="leed.html" class="navbartd">leed</a></td> <td width="150" height="30" align="center" valign="middle"><a href="contact.html" class="navbartd">contact</a></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="5" bgcolor="aba49e"></td> </tr> <tr bgcolor="#FFFFFF"> <td height="30"> </td> </tr> <tr> <td height="525" bgcolor="#FFFFFF"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="170" rowspan="2" align="left" valign="top"> <ul id="nav"> <table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#648326"> <tbody> <tr> <td height="25" align="left" valign="middle" bgcolor="#648326" class="rightnavtitleSmaller">architecture</td> </tr> </tbody> </table> <li><a href="#">Current Projects</a> <ul> <li><a href="4/j/j.html">Lausanne Collegiate School</a></li> <li><a href="3/f/f.html">Memphis Jewish Community Center</a></li> <li><a href="4/g/g.html">Presbyterian Day School</a></li> <li><a href="6/g/g.html">Racquet Club of Memphis</a></li> <li><a href="1/g/g.html">Triad Centre 3</a></li> </ul> </li> <li><a href="#">Corporate Buildings</a> <ul> <li><a href="1/h/h.html">7550 World River Blvd</a></li> <li><a href="1/b/b.html">FedEx Building I</a></li> <li><a href="1/c/c.html">ThyssenKrupp</a></li> <li><a href="1/a/a.html">International Place Tower 3</a></li> <li><a href="1/d/d.html">Shadow Creek at Southwind</a></li> <li><a href="1/i/i.html">Comcast Corporate Building</a></li> <li><a href="1/e/e.html">Phi Mu Headquarters</a></li> <li><a href="1/f/f.html">FedEx Distribution Centers</a></li> </ul> </li> <li><a href="#">Healthcare Facilities</a> <ul> <li><a href="3/a/a.html">Wolf River Medical Arts</a></li> <li><a href="3/b/b.html">Stern Cardiovascular Clinic</a></li> <li><a href="3/c/c.html">Memphis Gastroenterology</a></li> <li><a href="3/g/g.html">Wolf River Medical 3</a></li> <li><a href="3/d/d.html">Target House</a></li> <li><a href="3/e/e.html">Baptist Medical Centers</a></li> </ul> </li> <li><a href="#">Educational & Religious</a> <ul> <li><a href="4/a/a.html">FedEx Institute of Technology</a></li> <li><a href="5/a/a.html">Temple Israel</a></li> <li><a href="4/i/i.html">Temple Israel - Early Childhood Development</a></li> <li><a href="4/b/b.html">Memphis University School</a></li> <li><a href="4/c/c.html">MUS Stadium</a></li> <li><a href="4/d/d.html">St. Benedict High School</a></li> <li><a href="5/b/b.html">St. Francis of Assisi</a></li> <li><a href="4/e/e.html">St. Mary's Episcopal School</a></li> <li><a href="4/f/f.html">Craigmont Middle School</a></li> <li><a href="5/c/c.html">Second Presbyterian</a></li> <li><a href="5/d/d.html">Bellevue Baptist</a></li> <li><a href="5/e/e.html">Holy Communion</a></li> <li><a href="4/h/h.html">Rhodes College</a></li> </ul> </li> <li><a href="8/c/c.html">Hospitality Projects</a> </li> <li><a href="#">Green Buildings</a> <ul> <li><a href="1/g/g.html">Triad Centre 3</a></li> <li><a href="7/a/a.html">Tennessee Air National Guard</a></li> <!-- <li><a href="7/b/b.html" mce_href="7/b/b.html">Navy Vehicle Mant. Facility</a></li> --> </ul> </li> <li><a href="#">Special Projects</a> <ul> <li><a href="8/a/a.html">Aviation</a></li> <li><a href="8/b/b.html">Correctional</a></li> <li><a href="8/d/d.html">Performing Arts</a></li> <li><a href="7/a/a.html">Tennessee Air National Guard</a></li> </ul> </li> <table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#648326"> <tbody> <tr> <td height="5" align="left" valign="middle" bgcolor="#CCCCCC"></td> </tr> <tr> <td height="25" align="left" valign="middle" bgcolor="#648326" class="rightnavtitleSmaller">master planning</td> </tr> </tbody> </table> <li><a href="#">Current Projects</a> <ul> <li><a href="6/g/g.html">Racquet Club of Memphis</a></li> <li><a href="4/j/j.html">Lausanne Collegiate School</a></li> <li><a href="4/g/g.html">Presbyterian Day School</a></li> </ul> </li> <li><a href="#">Educational Institutions</a> <ul> <li><a href="6/a/a.html">Lausanne Collegiate School</a></li> <li><a href="6/b/b.html">St. Benedict High School</a></li> <li><a href="6/d/d.html">Memphis University School</a></li> <li><a href="6/e/e.html">Presbyterian Day School</a></li> <li><a href="6/f/f.html">Rhodes College</a></li> </ul> </li> <li><a href="#">Religious Centers</a> <ul> <li><a href="6/c/c.html">St Francis of Assisi</a></li> <li><a href="6/e/e.html">Second Presbyterian Church</a></li> </ul> </li> <li><a href="#">Governmental Projects</a> <ul> <li><a href="7/a/a.html">Tennessee Air National Guard</a></li> </ul> </li> <table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#648326"> <tbody> <tr> <td height="5" align="left" valign="middle" bgcolor="#CCCCCC"></td> </tr> <tr> <td height="25" align="left" valign="middle" bgcolor="#648326" class="rightnavtitleSmaller">interior design</td> </tr> </tbody> </table> <li><a href="#">Current Projects</a> <ul> <li><a href="6/g/g.html">Racquet Club of Memphis</a></li> <li><a href="3/f/f.html">Memphis Jewish Community Center</a></li> </ul> </li> <li><a href="#">Corporate Spaces</a> <ul> <li><a href="2/a/a.html">Davidson Hotel Company</a></li> <li><a href="2/b/b.html">Wunderlich Securities</a></li> <li><a href="2/c/c.html">Martin Tate Marrow & Marston</a></li> <li><a href="2/d/d.html">Cannon Wright Blount</a></li> <li><a href="2/e/e.html">MC2</a></li> <li><a href="2/f/f.html">Kevin Hyneman Companies</a></li> <li><a href="2/g/g.html">Thompson Dunavant, PLC</a></li> <li><a href="2/h/h.html">The Marston Group</a></li> </ul> </li> <li><a href="#">Healthcare Facilities</a> <ul> <li><a href="3/d/d.html">Target House</a></li> <li><a href="3/e/e.html">Baptist Medical Centers</a></li> </ul> </li> <li><a href="#">Special Use</a> <ul> <li><a href="4/a/a.html">FedEx Institute of Technology</a></li> <li><a href="8/d/d.html">Performing Arts</a></li> <li><a href="4/i/i.html">Temple Israel - Early Childhood Development</a></li> </ul> </li> </ul> </td> <td height="183" align="right" valign="top"> <table width="710" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td height="32"> </td> </tr> <tr> <td height="125" align="right"><img src="graphics/portfolio-graphic.jpg" alt="Portfolio" width="710" height="125" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="342" align="left" valign="top"><span class="maintitle">Portfolio</span><br /> <br /> <span class="bodytext">With 39 years of architectural, planning and interior design experience, and a dedicated staff, The Crump Firm, Inc. <br /> has a large and diverse portfolio of projects which showcase our broad range of design services.<br /> </span> <p class="bodytext">At The Crump Firm, Inc, we believe that our work is about more than just providing a service. <br /> It's about developing outstanding works of functionality and beauty which will stand the test of time. <br /> All of our designs are guided by the firm's mission statement:<br /> <span class="bodytextMS"> - To create inspired architecture which will endure.</span><br /> <br /> We strive to establish a relationship with our clients that is built on communication and trust. <br /> As a testament to this, a large portion of our work comes from referrals and previous clients.</p> </td> </tr> </tbody> </table> </td> </tr> <tr> <td height="25" align="center" valign="middle" bgcolor="#545861" class="bottombar">| <a href="profile.html" class="bottombar">Home</a> | <a href="contact.html" class="bottombar">Contact</a> |<a href="http://visitor.constantcontact.com/d.jsp?m=1102324242542&p=oi" target="_blank" class="bottombar"> Email Newsletter Sign Up </a>| Phone: 901.525.7744 |</td> </tr> </tbody> </table> <p> <script type="text/javascript"><!-- var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); // --></script> <script type="text/javascript"><!-- try { var pageTracker = _gat._getTracker("UA-6409676-1"); pageTracker._trackPageview(); } catch(err) {} // --></script> </p> </body> </html>
ie7.css (the one that almost works with IE7)
charset "UTF-8"; /* CSS Document */ ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { left: 149px; /* Set 1px less than menu width */ top: 0; display: none; min-height: 1%; } /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; color: #ffffff; background: #545861; /* IE6 Bug */ padding: 5px; font-family: "Helvetica Neue", Helvetica, Arial; font-size: 12px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #ccc; border-right-color: #ccc; border-bottom-color: #ccc; border-left-color: #ccc; } ul li a:hover { color: #648326; background: #FAFAFA; font-family: "Helvetica Neue", Helvetica, Arial; font-size: 12px; } /* Hover Styles */ li ul li a { padding: 2px 5px; font-size: 11px; width: 149px; } /* Sub Menu Styles */ li ul li a:hover { color: #FFFFFF; background: #648326; font-family: "Helvetica Neue", Helvetica, Arial; font-size: 11px; }
ie6.css (the one that works with everything but IE7)
@charset "UTF-8"; ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; color: #ffffff; background: #545861; /* IE6 Bug */ padding: 5px; font-family: "Helvetica Neue", Helvetica, Arial; font-size: 12px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #ccc; border-right-color: #ccc; border-bottom-color: #ccc; border-left-color: #ccc; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #648326; background: #FAFAFA; font-family: "Helvetica Neue", Helvetica, Arial; font-size: 12px; } /* Hover Styles */ li ul li a { padding: 2px 5px; font-size: 11px; } /* Sub Menu Styles */ li:hover ul, li.over ul {display: block; } /* The magic */ li ul li a:hover { color: #FFFFFF; background: #648326; font-family: "Helvetica Neue", Helvetica, Arial; font-size: 11px; }
.js (not sure if I need this for IE7 but it makes IE6 work)
// JavaScript Document startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList;
Thanks for the help people!
