ddsmoothmenu problem with IE 8

**theladuke** · 08-05-2011, 01:27 AM

Having a problem with the ddsmoothmenu with IE. Works fine in Firefox. But the whole page jumps down when you hover over the menu and the actual menu doesn't display. PLEASE HELP! Don't know much about code. THX!!!

Here's the page: http://www.absentmindedinstructor.com/guests.html

HERE'S THE HTML CODE:

Code:

<center><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" lang="en" xml:lang="en">

<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
	mainmenuid: "smoothmenu2", //Menu DIV id
	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
	//customtheme: ["#804000", "#482400"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>
</head>
<body>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
 <li><a href="#">Dee-chan's Pictures and Videos</a>
  <ul>
  <li><a href="http://www.absentmindedinstructor.com/deechan2008pics.html">2008 pictures</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2009pics.html">2009 pictures</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2010pics.html">2010 pictures</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2011pics.html">2011 pictures</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2008vids.html">2008 videos</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2009vids.html">2009 videos</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2010vids.html">2010 videos</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2011vids.html">2011 videos</a></li>
</li>
  </ul>

</div>

</body>
</center>


HERE'S THE CSS:

.ddsmoothmenu{
font: bold 12px Verdana;
background: #060606; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #060606; /*background of menu items (default state)*/
color: white;
padding: 0px 0px;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
	
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: center;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 2px;
right: 2px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;


/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}

**ddadmin** · 08-06-2011, 09:09 PM

There may be other errors, but inside your ddsmoothmenu.css, you've modified the crucial "position:absolute" definition in the following code to "center" instead:

Code:

.ddsmoothmenu ul li ul{
position: "center";
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

Change it back to "absolute".

**theladuke** · 08-08-2011, 11:39 PM

This did not fix the problem. Please advise.

**ddadmin** · 08-09-2011, 06:31 AM

You haven't fixed the issue I mentioned above as far as I can see. To recap, the change you should make should result in:

Code:

/*1st sub level menu*/

.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

inside ddsmoothmenu.css

**theladuke** · 08-10-2011, 04:35 AM

Actually, I did change it to absolute. All that did was bring the drop down menu to the left margin, and the problem continued. But even with that change, it still did the same thing in IE. So, i just changed the 'absolute' back to 'center' for now, because it is more attractive that way in my opinion.

Please let me know. Thanks a lot!

**ddadmin** · 08-10-2011, 06:41 AM

Hmm a value of "center" in place of "absolute" certainly isn't recommended, and in fact isn't even a valid value. Your woes with the later then most likely has to do with a different issue altogether. Looking at your page's source, there are many problems. You're currently calling the initialization code 3 times on the page to render 3 menus, with all 3 menus referring to the same ID ("smoothmenu1"). Not only is this redundant, but problematic in that each menu's ID should be unique. Removing all the unnecessary code on your page, the new page should look something like this instead:

Code:

<!--$sitebuilder version="2.6" extra="Java(1.6.0_26)" md5="e0761d5086ceed1ef9e5efc0951c4975"$-->
<!--$templateKey undetermined$-->
<html>
  <head>
    <!--$begin exclude$--><title>guests</title><!--$end exclude$-->
    <meta name="generator" content="Yahoo! SiteBuilder/2.6/1.6.0_26">
    <!--$page size 3141, 750$-->
    <!--$page margin 8, 8, 8, 8$-->
    <!--$fontFamily Times New Roman$-->
    <!--$fontSize 16$-->

    <style type="text/css"><!--
      BODY {font-family:"Times New Roman"; font-size:16;margin:0px;padding:0px;}
      P {font-family:"Times New Roman"; font-size:16;}
      FORM {margin:0;padding:0;}
    --></style>
  </head>
  <body bgcolor="#FFFFFF" background="images/black_bg.jpg" text="#000000" link="#0000FF" vlink="#FF0000" topmargin="0" leftmargin="0">

<!--$begin exclude$-->
    <div id="root" style="position:absolute;width:2269px;height:750px;">
<!--$end exclude$-->
      <div id="e0" style="position:absolute;left:8;top:8;width:2253;height:734;"><!--$img %ImageAssetImpl:/images/bg33.jpg$--><img src="sitebuilder/images/bg33-2253x734.jpg" width="2253" height="734" alt=""></div>      <div id="e1" style="position:absolute;left:513;top:109;width:252;height:303;"><div style="width:252px;height:303px;overflow:auto;"><!--$begin html$--><center><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" lang="en" xml:lang="en">

<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
	mainmenuid: "smoothmenu2", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
	mainmenuid: "smoothmenu3", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>
</head>
<body>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
 <li><a href="#">Dee-chan's Pictures and Videos</a>

  <ul>
  <li><a href="http://www.absentmindedinstructor.com/deechan2008pics.html">2008 pictures</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2009pics.html">2009 pictures</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2010pics.html">2010 pictures</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2011pics.html">2011 pictures</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2008vids.html">2008 videos</a></li>

  <li><a href="http://www.absentmindedinstructor.com/deechan2009vids.html">2009 videos</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2010vids.html">2010 videos</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechan2011vids.html">2011 videos</a></li>
</li>
  </ul>

</div>

<div id="smoothmenu2" class="ddsmoothmenu">
<ul>
 <li><a href="#">Music by Myself and Friends</a>
  <ul>
  <li><a href="http://www.absentmindedinstructor.com/shamisen.html">Shamisen</a></li>
  <li><a href="http://www.absentmindedinstructor.com/labronx.html">La Bronx</a></li>

  <li><a href="http://www.absentmindedinstructor.com/phineas.html">Phineas</a></li>
  <li><a href="http://www.absentmindedinstructor.com/lullatone.html">Lullatone</a></li>
  <li><a href="http://www.absentmindedinstructor.com/tomfallon.html">Tom Fallon</a></li>
  <li><a href="http://www.absentmindedinstructor.com/mymom.html">My Mom</a></li>
  <li><a href="http://www.absentmindedinstructor.com/deechansfirstsong.html">Dee-chan's First Song</a></li>

</li>

  </ul>

</div>

<div id="smoothmenu3" class="ddsmoothmenu">
<ul>
 <li><a href="#">Photography, Photoshop and Other Photos</a>

  <ul>
  <li><a href="http://www.absentmindedinstructor.com/architecture.html">architecture</a></li>
  <li><a href="http://www.absentmindedinstructor.com/lightgraffiti.html">light graffiti</a></li>
  <li><a href="http://www.absentmindedinstructor.com/glitch.html">glitch</a></li>
  <li><a href="http://www.absentmindedinstructor.com/pinhole.html">pinhole</a></li>
  <li><a href="http://www.absentmindedinstructor.com/nightphotography.html">night photography</a></li>

  <li><a href="http://www.absentmindedinstructor.com/photoshop.html">photoshop</a></li>
  <li><a href="http://www.absentmindedinstructor.com/homemade.html">homemade</a></li>
  <li><a href="http://www.absentmindedinstructor.com/kokohaabunai.html">koko ha abunai</a></li>
  <li><a href="http://www.absentmindedinstructor.com/otherstuff.html">otherstuff</a></li>
  <li><a href="http://www.absentmindedinstructor.com/wedding.html">wedding</a></li>
  <li><a href="http://www.absentmindedinstructor.com/gaidai.html">gaidai</a></li>

</li>
 <li><a href="http://www.absentmindedinstructor.com/3d">3D</a></li>
</li>
  </ul>

</div>

</body>
</center>

<!--$end html$--></div>
      </div>
      <div id="e6" style="position:absolute;left:963;top:130;width:629;height:484;"><!--$img %ImageAssetImpl:/images/camera_by_Joi.jpg$--><img src="sitebuilder/images/camera_by_Joi-629x484.jpg" width="629" height="484" alt=""></div><!--$begin exclude$-->

    </div>
<!--$end exclude$-->
  </body>
</html>
<!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code --><script language="JavaScript" src="http://l.yimg.com/d/lib/smb/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1312957431" alt="setstats" border="0" width="1" height="1"></noscript>

But even with that there still exists redundancies and potential problems. You shouldn't have to initialize 3 separate DD Smooth menus to achieve what you're trying to do on your page. Why not just create one menu with 3 drop down menus. If you looked at the 1st demo on the DD script page, it's just one menu bar, but with 3 drop down menus (or as many as you like). That's way more efficient and less prone to styling issues than when you have 3 main menu bars.

**theladuke** · 08-17-2011, 03:33 AM

Thanks for all your help, but the problem remained. I changed the 'center' back to 'absolute', uploaded the css, removed the extra two html code boxes from that webpage, and modified the remaining html code as you instructed. Despite doing this, the whole page still jumped up and down when you hovered the cursor over the title of the menu in Internet Explorer.

Please help!

Thread: ddsmoothmenu problem with IE 8

Thread Tools

Search Thread

ddsmoothmenu problem with IE 8

still doesn't work

Bookmarks

Bookmarks

Posting Permissions