No replies
ptm11msu
Offline
newbie
Last seen: 11 years 20 weeks ago
Joined: 2009-04-29
Posts: 1
Points: 0

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">&nbsp;</td>
<td width="150" height="70" align="center" valign="bottom">&nbsp;</td>
<td width="150" height="70" align="center" valign="bottom">&nbsp;</td>
<td width="150" height="70" align="center" valign="bottom">&nbsp;</td>
<td width="150" height="70" align="center" valign="bottom">&nbsp;</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">&nbsp;</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 &amp; 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 &amp; 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">&nbsp;</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&amp;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!