JS drop down menu not working with IE7

sfphoto

12-13-2010, 11:13 PM

Thanks for looking, I am a novice.

Desire: Drop down menu that works with IE7 & 8

Works with: MSIE6? andversions (that I have checked) of FF, Safari, Safari for iPhone

Page:
http://sfphotography.com/menu/test.html

All files:
http://sfphotography.com/menu/

Note, there are no linked pages, IE7 does not even show the option for selecting pages.

<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import url(style2.css);
</style>

<body text="black" bgcolor="white" link="#a50921" vlink="#767676" background="">

<div align="center">
<ul><font size="2">
<li><a href="#">Rooms</a>
<ul>
<li><a href="queen.html">2 Queen / King</a></li>
<li><a href="family.html">Family Suite</a></li>
<li><a href="jacuzzi.html">Jacuzzi Suite</a></li>

</ul>
</li>
<li><a href="#">Rates</a>
<ul>
<li><a href="queen_.html">2 Queen / King</a></li>
<li><a href="family_.html">Family Suite</a></li>
<li><a href="jacuzzi_.html">Jacuzzi Suite</a></li>

</ul>
</li>
</font>
</ul>

// 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;

body {
font: normal 11px verdana;
}

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: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* 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: #a50921; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

abduraooft

12-14-2010, 08:04 AM

Works with: MSIE6 Sure? Doesn't work at my end.

Anyway, before talking about cross browser compatibility issues, you need to have a valid markup.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
For this, change your current incomplete DOCTYPE (http://www.alistapart.com/articles/doctype/) to a valid one. I'd recommend an HTML Strict one.

After that validate your markup and fix all errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fsfphotography.com%2Fmenu%2Ftest.html) in it, such as removing deprecated tags like <font>

sfphoto

12-14-2010, 07:57 PM

Thanks for the tips.

I am on a Mac & no IE, had a friend check with IE6 said fine but he she did not realize there were drop down menus.

Cleaning up the HTML seems to now make it work (in IE7). There is an error message though: Object required

Hopefully some one can check and confirm that the drop down items appear ??

ref: http://sfphotography.com/menu/test.html

(note- links are dead, am working on getting the drop down to appear like it does in FF)

Thanks!

abduraooft

12-15-2010, 07:41 AM

Remove // JavaScript Document
from your javascript file and add id="nav" to your <ul>