The styles may need to be altered a little. Try finding any IE hacks in the CSS and using conditional comments to direct them only at IE6. If it renders ok in Firefox when you test it it should render similarly in IE7.

Just to be clear it works in FF and IE6, but not in IE7.

Right... that's why if you can see any IE hacks you've got to drive them to IE6 only.

From the ALA article:

"On page load, the startList function is invoked. The function determines if the browser is actually IE 5 or greater by checking for the existence of the document.all object and document.getElementById function. This is a bit of a crude way of doing it but it’s short and sweet — and since we are trying to make a compact solution, this will do. It then loops through, enabling mouseover and mouseout events which add and remove the over class from the className property of the element."

So this is looking for anything above IE5. If IE7 parses this code when it doesn't need to then this may be causing you your distress.

I am lacking in my javascripting techniques so you may want to consult some javascript ladies and gents to get this explained. Somewhere in the javascript it needs to search out only IE5 and IE6 browsers.

OK, I now understand what you're saying ....only trouble is acting on it, that will be interesting for a novice like me! Always interesting digging around to see what does what though. Thanks.

Welcome to WebmasterWorld [webmasterworld.com] sixchooks!

From the description you give ("checking for the existence of the document.all object and document.getElementById function"), you should be able simply to remove the check for document.all and document.getElementById, and simply call the Javascript file from within an IE conditional comment which excludes IE7.

Something like the following (completely untested, use at your own risk!):

<!--[if lte IE 6]>
<script type="text/javascript">
startList = function() {
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;
</script>
<![endif]-->

The crudeness of the original solution found its limits with the release of IE7 - the script's weakness is its lack of thought regarding forward-compatibility.

Thank you for your advice, will post again with the results...sick kids to tend to just now.

The styles may require few changes it will be easy. Try to find out a IE hacks in CSS and using conditional comments to direct them to IE6.
If it works in Firefox when you test it it will work in IE7 also.

I'm blown away by how helpful everyone is, however I still need pointing in the right direction please..

encyclo's suggestion has worked to a point, I have 3 graphics which head the 3 dropdown menus and what is happening now is that instead of just being out of alignment completely, when you hover over the first graphic the dropdown box drops down perfectly aligned to the 2nd graphic, the 2nd to the 3rd and the 3rd drop down, if there was a 4th would line up nicely with that.

Is it obvious to anyone if this is still the script that has to be tweaked or the css?

Hi sixchooks.. it's likely the CSS now,
by hiding the javascript in a conditional you have basically exposed IE7 to the pure CSS method.

don't know your css but using suckerfishes..

The others are right in that you need to look for hacks in there and in case you don't know where to look it's the top/left positioning of the dropdown list.. IE7 still needs the IE hacked values but the hack is now broken in IE7 - it would have been better (more future proof) if it had been applied in conditional comments in the first place so it could've been expanded, but that's hindsight for ya!

(taken from suckerfish source)

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: url(image.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #7d6340;
}

li>ul {
top: auto;
left: auto;
}

those two bits of code are targeting exactly the same thing, the first rule is read and applied by all browsers, the second is only read by compliant browsers so they override the first rule as per the cascade. IE6 and below can't read the second rule so they ignore it and use the first rule

***BUT IE7*** now supports the advanced child selector too (li>ul) so it's applying the the second rule properly too, but unfortunately it still needs the first set of values as it still has positioning oddities.

done using "future proof" conditional comments it originally might have looked like this

in main CSS file:
li ul {
display: none;
position: absolute;
/* no positioning needing it's auto by default */
font-weight: normal;
background: url(images/ddbg3.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #7d6340;
}

conditional:
<!--[if lte IE6]>
<style type="text/css" media="screen">
li ul {
top: 100%;
left: 0;
}
</style>
<![endif]-->

which would bring you to the point you're at now except the only change you would have to make would be to change the 6 to a 7

<!--[if lte IE7]>

to encompass IE7 too

Suzy

...So this is looking for anything above IE5.

...the script's weakness is its lack of thought regarding forward-compatibility

I am seeing these errors on a LOT of websites, including a lot of the really big name ones like Qwest.

The basic flaw is that they all used the IE6+ type thing instead of specifially addressing just IE6.

Not sure why so many did that, but I guess most of those hacks assumed that the same bugs would be in IE forever. But of course probably 95% just cut and pasted the hacks without really thinking of the implications.

And a lot of the hacks also address IE under version 6, which IMO is a total waste of time now since the usage of versions less than 6 has dropped to around .4% total.

[edited by: Wlauzon at 3:18 pm (utc) on Dec. 6, 2006]