I am working on a site (live demo
here).
The problem is there is supposed to be a drop-down menu under "Services". It works without a problem in FF, it works without a problem in IE IF I load it from a local file. When loading from the live demo, the drop down only appears in IE after clicking on "HOME".
Here is my HTML (scaled down):
HTML
<
html>
<
head>
<
title>Women's Help Center<
/title>
<
link rel="
stylesheet" type="
text/css" href="
style.css" />
<!--[if IE 7]>
<
link rel="
stylesheet" type="
text/css" href="
style_ie.css" />
<![endif]-->
<script src="
hover.js" type="
text/javascript" language="
javascript"><
/script>
<!--[if IE 7]>
<script defer type="
text/javascript" src="
pngfix.js"><
/script>
<![endif]-->
<
/head>
<
body>
<
div id="
wrapper">
<
div id="
header">
<
div id="
ph_num">TOLL FREE 1-800-999-7406 (PA ONLY)<
/div>
<
div id="
logo"><
img src="
gfx/logo.png" style="
height:243px;width:509px;" /><
/div>
<
div id="
th_yr"><
img src="
gfx/thirty.png" style="
height:235px;width:530px;" /><
/div>
<
/div>
<
div id="
navigation">
<
table width="
1100" height="
215" border="
0" align="
center" cellpadding="
0" cellspacing="
0" id="
menu" style="
margin-top:-29px;">
<
tr><
td height="
215" align="
right" valign="
top"><
ul id="
nav">
<
li><
a href="
index.html"> <
font color=#f99544>HOME<
/font> <!
--[if IE 7]> <![endif]--><
font color=#9ccacd>|<
/font><!
--[if IE 7]> <![endif]--> <
/a><
/li>
<
li><
a href="
#">SERVICES <!
--[if IE 7]> <![endif]--><
font color=#9ccacd>|<
/font><!
--[if IE 7]> <![endif]--> <
/a><
ul>
<
li><
a href="
serv_environ.html" rel="
nofollow"><
font size=3><!
--[if IE 7]><font size=4><![endif]-->Emergency Shelter<
/font><
/a><
/li>
<
li><
a href="
serv_coal.html" rel="
nofollow"><
font size=3><!
--[if IE 7]><font size=4><![endif]-->Information & Referral<
/font><
/a><
/li>
<
li><
a href="
serv_area.html" rel="
nofollow"><
font size=3><!
--[if IE 7]><font size=4><![endif]-->Legal Advocacy<
/font><
/a><
/li>
<
/ul><
/li>
<
li><
a href="
#">PROGRAMS <!
--[if IE 7]> <![endif]--><
font color=#9ccacd>|<
/font><!
--[if IE 7]> <![endif]--> <
/a><
/li>
<
li><
a href="
#">COUNSELING <!
--[if IE 7]> <![endif]--><
font color=#9ccacd>|<
/font><!
--[if IE 7]> <![endif]--> <
/a><
/li>
<
li><
a href="
#">CONTACT<
font color=#ffffff
/font>US<
/a><
/li>
<
/ul><
/td><
/tr><
/table>
<
/div>
.
.
.
.
.
<
/body>
<
/html>
and the javascripts listed in the header:
hover.js:
CODE
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"), "");
}
}
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
pngfix.js (is supposed to correctly render png images in IE):
CODE
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
Any ideas why I'm having this problem and/or how I can fix it?? Many thanks!
17 Jul, 2008 - 07:50 AM
|