PDA

View Full Version : HTML / CSS Menubar Needs a Call ... I think


dbepp
09-02-2011, 03:46 PM
I have an HTML / CSS menu that works well in all browsers except for... IE.
When I roll over a drop down, such as our products page, it doesn't drop down to the sub menu in IE.. works well in all other browsers tested. SO.. after some investigation, I figure suckerfish is the answer... and it is; but only on some pages.

It doesn't work here:
http://www.onlytrimax.com/test_index.html

It works here:
http://www.onlytrimax.com/why_trimax.html

I'm sure there is a simple fix that I can not see..

Any help would be greatly appreciated!!!

Here's the external css:

@charset "UTF-8";
#navMenu {
margin:0;
padding:0;
}
#navMenu {
margin:0;
width:auto;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#474747;
}

#navMenu ul li a {
text-align:center;
height:30px;
width:148px;
display:block;
color:#000;
font-family:"Tahoma, Geneva, sans-serif";
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}

#navMenu ul li:hover ul, li.over ul {
visibility:visible;
z-index:9999;
display:block;
}

/**********************************************/

/*sets top level hover color*/

#navMenu li:hover {
background:#09F;
}

/*sets link items hover color and background*/

#navMenu ul li:hover ul li a:hover {
color:#000;
background:#CCC;
}

/* Changes text color on hover for main menu hover*/

#navMenu a:hover {
color:#000;
}

/* Contains the Float */

.clearFloat {
clear:both;
margin:0;
padding:0;
}

/* IE7 Display Fix */

#navmenu #holder ul li {

display: inline;

}


Here is the source code for the test_index (which doesn't work):

<!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>Only Trimax Home - Only Alpha Pool Products</title>
<style type="text/css">
</style>
<link href="css/products_site.css" rel="stylesheet" type="text/css" />
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<script type="text/javascript">
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_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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];}
}
</script>
<link href="Spry-UI-1.7/css/SpryImageSlideShow.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141542: #ImageSlideShow */

#ImageSlideShow.ImageSlideShow {
width: 685px;
height: 396px;
border: solid 0px #ffffff;
}

#ImageSlideShow .ISSClip {
background-color: #ffffff;
}

/* EndOAWidget_Instance_2141542 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141542" binding="#ImageSlideShow" />
</oa:widgets>
-->
</script>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24019200-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("navMenu");
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>

<link href="css/menu_bar.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('images/tagline2.jpg')">
<div id="container">

<div id="header">
<ul>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="test_index.html">Home</a></li>
</ul>
<img src="images/Only_Alpha_logo_tm_white.png" alt="only alpha pool products" width="220" height="70" class="header_alpha_logo" /><a href="test_index.html"><img src="images/trimax_logo.png" alt="Trimax XP3" width="380" height="38" class="product_logo" /></a></div>

<div id="wrapper">
<div id="navMenu">

<ul>

<li> <a href="why_trimax.html">Why Trimax XP3</a>


</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li> <a href="#">Only Alpha Products</a>

<ul>

<li><a href="entry_systems.html">Entry Systems</a></li>

<li><a href="liners.html">Alpha Liners</a></li>

<li><a href="coping.html">Aluminum Coping</a></li>


</ul> <!-- end inner UL -->


</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li> <a href="#">Alpha Pool Shapes</a>

<ul>

<li><a href="pool_shapes.html">Alpha Shapes</a></li>

<li><a href="garden_gems.html">Garden Gems</a></li>


</ul> <!-- end inner UL -->


</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li> <a href="pool_gallery.html">Pool Gallery</a>


</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li> <a href="safety.html">Safety Information</a>


</li> <!-- end main LI -->

</ul> <!-- end main UL -->


<br class="clearFloat" />


</div> <!-- end navMenu -->
</div> <!---end of wrapper -->

<div id="flash_main">
<ul id="ImageSlideShow">
<li><a href="images/slideshow_1.jpg"><img src="images/slideshow_1tb.jpg" alt="" width="80" height="60" /></a></li>
<li><a href="images/slideshow_2.jpg"><img src="images/slideshow_2tb.jpg" alt="" width="80" height="60" /></a></li>
<li><a href="images/slideshow_3.jpg"><img src="images/slideshow_3tb.jpg" alt="" width="80" height="60" /></a></li>
<li><a href="images/slideshow_4.jpg"><img src="images/slideshow_4tb.jpg" alt="" width="80" height="60" /></a></li>
<li><a href="images/slideshow_5.jpg"><img src="images/slideshow_5tb.jpg" alt="" width="80" height="60" /></a></li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141542: #ImageSlideShow

var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
widgetID: "ImageSlideShow",
injectionType: "replace",
autoPlay: true,
displayInterval: 6000,
transitionDuration: 2000,
componentOrder: ["view"],
plugIns: [ ]
});
// EndOAWidget_Instance_2141542
</script>
</div>
<div class="float_call_to_action" id="cta1"><a href="find_contractor.html"><img src="images/Locator_Button.jpg" alt="" name="call_button" width="211" height="96" id="call_button" /></a></div>
<div class="float_call_to_action" id="cta2"><a href="request_trimax.html"><img src="images/request_trimax.jpg" alt="" name="call_button_two" width="211" height="96" id="call_button_two" /></a></div>
<div class="float_call_to_action" id="cta3"><a href="register.html"><img src="images/Quality_Warranty_Button.jpg" alt="" name="call_button_three" width="211" height="96" id="call_button_three" /></a></div>
<div class="float_call_to_action" id="cta4"><a href="#"><img src="images/staycation_button.jpg" alt="" name="call_button_four" width="212" height="97" id="call_button_four" /></a></div>
<div id="safetyalwayslogo"><a href="design.html"><img src="images/autodesk_button.png" name="headsup" width="212" height="102" vspace="3" align="middle" /></a></div>
<div id="onlyalphalogo"><div id="wx_module_7992">
<a href="http://www.weather.com/weather/local/46845">Fort Wayne Weather Forecast, IN (46845)</a>
</div>

<script type="text/javascript">

/* Locations can be edited manually by updating 'wx_locID' below. Please also update */
/* the location name and link in the above div (wx_module) to reflect any changes made. */
var wx_locID = '46845';

/* If you are editing locations manually and are adding multiple modules to one page, each */
/* module must have a unique div id. Please append a unique # to the div above, as well */
/* as the one referenced just below. If you use the builder to create individual modules */
/* you will not need to edit these parameters. */
var wx_targetDiv = 'wx_module_7992';

/* Please do not change the configuration value [wx_config] manually - your module */
/* will no longer function if you do. If at any time you wish to modify this */
/* configuration please use the graphical configuration tool found at */
/* https://registration.weather.com/ursa/wow/step2 */
var wx_config='SZ=180x150*WX=FHU*LNK=SSNL*UNT=F*BGI=su mmer*MAP=null|null*DN=www.onlytrimax.com*TIER=0*PI D=1260916619*MD5=a5a077588251b90f982085a4274b2277' ;

document.write('<scr'+'ipt src="'+document.location.protocol+'//wow.weather.com/weather/wow/module/'+wx_locID+'?config='+wx_config+'&proto='+document.location.protocol+'&target='+wx_targetDiv+'"></scr'+'ipt>');
</script></div>
<div id="resource_scroll">
<marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="5" >
Beat the summer heat without ever leaving home! Corral the kids for the summer or turn your backyard into your personal oasis. Now is the time to make your family's dream come true! Contact your local contractor today! And practice Heads up Fun by insisting that all bathers enter all bodies of water, including a swimming pool with their Feet First and their HEADS UP!!!!
</marquee><p style="font-family:verdana,arial,sans-serif;font-size:10px;"></p>
</div>
<div id="tagline"><img src="images/tagline1.jpg" width="474" height="80" alt="tagline" /></a></div>
</div>

</body>
</html>


Here's the source code for why_trimax (where it does work and notice there isn't the script in the head):

<!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>Why Trimax - Only Alpha Pool Products</title>
<style type="text/css">
</style>
<link href="css/why_product.css" rel="stylesheet" type="text/css" />
<link href="css/products_site.css" rel="stylesheet" type="text/css" />
<link href="css/menu_bar.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<ul>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="test_index.html">Home</a></li>
</ul>
<img src="images/Only_Alpha_logo_tm_white.png" alt="only alpha logo" width="220" height="70" class="header_alpha_logo" /><a href="test_index.html"><img src="images/trimax_logo.png" width="380" height="38" class="product_logo" longdesc="test_index.html" /></a></div>

<div id="wrapper">
<div id="navMenu">

<ul>

<li> <a href="why_trimax.html">Why Trimax XP3</a>


</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li> <a href="#">Only Alpha Products</a>

<ul>

<li><a href="entry_systems.html">Entry Systems</a></li>

<li><a href="liners.html">Alpha Liners</a></li>

<li><a href="coping.html">Aluminum Coping</a></li>


</ul> <!-- end inner UL -->


</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li> <a href="#">Alpha Pool Shapes</a>

<ul>

<li><a href="pool_shapes.html">Alpha Shapes</a></li>

<li><a href="garden_gems.html">Garden Gems</a></li>


</ul> <!-- end inner UL -->


</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li> <a href="pool_gallery.html">Pool Gallery</a>


</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li> <a href="safety.html">Safety Information</a>


</li> <!-- end main LI -->

</ul> <!-- end main UL -->


<br class="clearFloat" />


</div> <!-- end navMenu -->
</div> <!---end of wrapper -->

<div id="why_header_pic"><img src="images/why_trimax.jpg" width="900" height="272" /></div>
<div id="why_trimax">
<h1><a href="get_the_facts.html"><img src="images/get_the_facts.jpg" alt="get the facts" width="180" height="171" align="left" class="get_the_facts" /></a>GALVANIZED STEEL WALL....THREE BENDS....MAXIMUM STRENGTH<img src="images/trimaxpanel.jpg" alt="trimax_closeup" width="220" height="312" id="product_picture" /></h1>
<p><span style="text-align: center; color: #900; font-size: 18px;">Introducing <img src="images/TriMaxSM.jpg" width="172" height="15" alt="TRIMAX XP3" /> steel wall construction components for swimming pools. A retaining wall system that is not only flexible to various sizes and shapes, but also provides critical strength and rigidity to the structure of the pool.</span></p>
<p>Wall strength increases dramatically with an additional bend in the steel. Our TRIMAX Steel Panels are engineered to be stronger, utilizing the maximum amount of steel in each panel section. Combine this with the &quot;SPERT&quot; riveting technology at the side flange and you have unparalleled strength throughout the pool structure. TRIMAX XP3 building materials are revolutionizing the pool industry by their easy installation, durability, and unchallenged strength. </p>
<p></a><a href="http://www.salvagnini.com/salvagnini.php?s=236" target="_new"><img src="images/S4_P4.jpg" alt="salvagnini" width="320" height="187" align="right" /></a></a><a href="register.html"><img src="images/lifetime_warranty.jpg" alt="warranty" width="200" height="107" hspace="15" /></a><a href="about_us.html"><img src="images/flag.jpg" alt="flag" width="128" height="106" align="left" /></a></p>
</div>
<div class="safety_legal" id="safety_legal">Only Alpha Pool Products/Trivector Manufacturing Inc. does not manufacture or endorse diving boards or slides. Any use or installation of diving boards or slides must be in strict compliance with each such equipment manufacture's specifications and recommendations, the Association of Pool and Spa Professionals Standards, as well as all local building codes and regulations; including recommendations from the American Red Cross and the Consumer Product Safety Commission. &quot;No Diving&quot; signage must be installed around the perimeter of a pool in accordance with the instructions provided by the liner manufacturer.</div>
</div>
</div>

</body>
</html>

dbepp
09-02-2011, 05:57 PM
Though no one has replied yet, I wanted to add the following.

I'm not sure it's a javascript issue. Since the menu bar drops down on http://www.onlytrimax.com/why_trimax.html where there isn't any javascript and not on http://www.onlytrimax.com/test_index.html where there is...

I'm not sure what the problem is.. please help. I'm losing my mind over this issue. And I've removed the <scrip> from the test_index page since it wasn't working anyways.

Corrosive
09-03-2011, 06:18 AM
Which version of IE? Because both pages drop down fine in my IE8.

calvin007007
09-03-2011, 11:06 AM
hi guy !
I have read your coding, it is correct, but my doubt is in the javascript.
just check it once again.
thank u
*signature deleted*

(http://www.organizersindia.com/)

dbepp
09-06-2011, 12:42 PM
Which version of IE? Because both pages drop down fine in my IE8.

The issue I'm finding is with IE 7. (I should have included that)

I think I'm just going to forget about the 6.4% of users who use IE 7 and 6.. From January to July of this year, the percentage of users who use IE 6 and 7 has gone from 9.5% to 6.4%... at that rate, only 3.5% of users will be using those editions by the end of the year.

In your opinion, what editions should I be concerned about? It seems to be working for all other browsers.