1 reply [Last post]
ryy
ryy's picture
Offline
newbie
Last seen: 9 years 5 days ago
Timezone: GMT-4
Joined: 2009-08-18
Posts: 5
Points: 7

Hello,

Please take a look at :[URL="http://artduffieldrealty.webmaxsites.com/"]http://artduffieldrealty.webmaxsites.com/[/URL]
The site works fine in IE8 and FF3.5

But I am having trouble with the menu in IE7. I made the mistake of not testing the site in IE7 as I was putting it together.

If you hover over a menu item, the drop down does not line up with the parent element in IE7. Has this happened to anyone before?
(please use IE Tester if you do not have IE7 installed)

[URL="http://htmldog.com/articles/suckerfish/dropdowns/"]Son of Suckerfish[/URL] simply hides the drop down with left: -9999 and brings it back with left:auto;
I know this method works fine in IE7. Did I screw up some padding or margin somewhere?

I have spent substantial amount of time with this. But I am unable to figure it out. Please Please help.

I am pasting the css file for navigation and html snippet for your covenience:

#nav {
	overflow: hidden;
	height: 30px;
	background-color: #CA0000;
	border-top: 3px solid #000;
	border-bottom: 3px solid #000;
}
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
	text-decoration: none;
	font-size: 11px;
}

#nav li { /* all list items */
	
	font-family: "Verdana Bold";
	font-weight: bold;
	float: left;
	line-height: 30px;
	text-align: center;
	width: 80px; /* width needed or else Opera goes nuts */
}
#nav li a {
	color: #FFF;
	margin:0;
	padding-left: 0px;
	padding-right: 0px;
}
#nav li li a,#nav li li li a{
	color: #000;
}
#nav li li a {
	border-left: 1px solid #CA0000;
	border-right: 1px solid #CA0000;
	border-bottom: 1px solid #CA0000;
	border-top: 1px solid #CA0000;
	padding-left: 3px;
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #EFEFEF;
	width: 115px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li ul :hover { 
  background: #FFF;
}

#nav li ul li, #nav li ul li ul li{ /* second & third -level lists */
	line-height: 15px;
	text-align: left;
}
#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

<!--TLC for IE7 since it does not recognize the :hover pseudo class-->
<script type="text/javascript">
<!--
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->
</script>
 
<title>Art Duffield Realty</title>
</head>
<body onLoad="realtyLoad()" onUnload="realtyUnload()">
	<div id="container">
	<div id="black_border">
		<div id="masthead">
			<img src="/themes/artduffield.com/images/ArtDuffieldLogo.jpg" alt="Art Duffield Realty, LLC" />
 
			<img src="/themes/artduffield.com/images/ArtDuffieldPageTop.jpg" alt="Art Duffield Office" id="office"/>
			<img src="/themes/artduffield.com/images/ArtDuffieldAddress.jpg" alt="502 Salem Ave. Woodbury,NJ 08096. Phone 856-848-4446. Fax 856-848-0148" id="address"/>
			<ul id="nav">
				<li><a href="http://artduffieldrealty.webmaxsites.com">Home</a></li>
				<li><a href="#">Buying</a>
					<ul><li><a href="/search">Search Properties</a></li><li><a href="/content/page-30.html">Consumer Info</a></li><li><a href="/featured">Featured Homes</a></li><li><a href="/content/page-27.html">Consumer Info</a></li><li><a href="/calculators">Financial Tools</a></li><li><a href="/dictionary">Dictionary</a></li></ul>
 
				</li>
				<li><a href="#">Selling</a>
					<ul><li><a href="/content/page-31.html">Consumer Info</a></li><li><a href="/calculators">Financial Tools</a></li></ul>
				</li>
				<li><a href="#">About Us</a>
					<ul><li><a href="/content/page-44.html">Our Company</a></li><li><a href="/content/page-36.html">Join Our Team</a></li><li><a href="/testimonials">Testimonials</a></li><li><a href="/agents">Our Agents</a></li></ul>
 
				</li>
				<li><a href="/officers">Agents</a></li>
				<li style="padding-right:60px;padding-left:30px;"><a href="#">For Members</a>
					<ul><li><a href="/index.php?s=account&amp;a=login">Login</a></li><li><a href="/index.php?s=account&amp;a=register">Register</a></li><li><a href="/index.php?s=account&amp;a=profile">Account Profile</a></li><li><a href="/index.php?s=account&amp;a=documents">Document Library</a></li></ul>
				</li>
				<li><a href="#">Other Services</a>
 
					<ul><li><a href="http://www.ftnj.com/" target="_blank">Foundation Title</a></li><li><a href="http://www.nsfg.net/Default.aspx" target="_blank">Northern States Funding Group</a></li><li><a href="/content/page-41.html">Sites of Interest</a></li><li><a href="/calculators">Mortgage Calculators</a></li><li><a href="/kb">Knowledge Base</a></li><li><a href="/dictionary">Real Estate Dictionary</a></li><li><a href="/content/page-21.html">Useful websites</a></li></ul>
				</li>
				<li style="padding-left: 40px;"><a href="/contact">Contact Us</a></li>
			</ul>
		</div><!--end masthead-->

swillicott
Offline
Regular
Last seen: 9 years 39 weeks ago
Joined: 2006-04-15
Posts: 43
Points: 0

Just been through something

Just been through something similar myself - I am no expert on this but it might be worth trying the link below:

http://css-class.com/articles/explorer/sticky/index.htm

... this refers to a different problem to the one you are experiencing but there are a lot of fixes listed so it might be worth trying some of those (partularly the hasloayout attributes).

Hope this helps??