PDA

View Full Version : A.L.M.G./IE8: menus open wrong direction



baznikco
09-21-2009, 02:57 PM
1) Script Title: All Levels Menu Generator

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/generator.htm

3) Describe problem: IE8, Horiz menu opens left&up until page refreshed

Hi Guys and thanks for all the wonderful stuff on yr site, very educational!

MattBlackMenu

A minor prob only in IE8: Page loads with Nav Menu at top, looks fine. On Mouseover the dropdowns open to the left and upward instead of down and right.

If the page is refreshed evrything behaves normally.

included index html & CSS files below

Thanks anybody who can help. This really holding me up. Baz







<!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">
<!-- #BeginTemplate "/Templates/NavBar.dwt" -->
<head>
<!-- #BeginEditable "Info" -->
<meta name="DESCRIPTION" content="Dufftown Information, Business, Pictures, Events " />
<meta name="KEYWORDS" content="Dufftown Information,Dufftown Pictures,Dufftown Business" />
<!-- #EndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- #BeginEditable "doctitle" -->
<title>Dufftown Bag - independant local info</title>
<!-- #EndEditable -->
<!-- #BeginEditable "ddlevelsNav" -->
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">

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

</script>
<!-- #EndEditable -->
</head>
<body bgcolor="#000000" text="#FFFFFF">
<!-- #BeginEditable "MenuNav" -->
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="/index.html"><span>Home</span></a></li>
<li><a href="http://www." rel="ddsubmenu1"><span>Photo Scenes</span></a></li>
<li><a href="http://www." rel="ddsubmenu2"><span>Local Business</span></a></li>
<li><a href="http://www." rel="ddsubmenu3"><span>News</span></a></li>
<li><a href="http://www." rel="ddsubmenu4"><span>Events</span></a></li>
<li><a href="http://www." rel="ddsubmenu5"><span>Local Maps</span></a></li>
<li><a href="http://www." rel="ddsubmenu6"><span>Contact</span></a></li>
<li><a href="http://www." rel="ddsubmenu7"><span>Links</span></a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<!-- #EndEditable --> <!-- #BeginEditable "HeadBox" -->
<table width="780" border="1" cellspacing="0" cellpadding="0" name="HeadBox">
<tr>
<td><img src="Images/header.jpg" width="780" height="200"></td>
</tr>
</table>
<!-- #EndEditable "HeadBox" --> <!-- #BeginEditable "content" -->
<table width="780" border="1" cellspacing="0" cellpadding="0" name="Content">
<tr>
*/a table of indeterminate size
</tr>
</table>
<!-- #EndEditable "Content" --> <!-- #BeginEditable "SubMenu" -->
<!--Top Drop Down Menu 1 LOCAL SCENES HTML-->
<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">In Dufftown</a>
<ul>
<li><a href="#">In D 1</a></li>
<li><a href="#">In D 2</a></li>
<li><a href="#">In D 3</a></li>
<li><a href="#">In D 4</a></li>
</ul>
</li>
<li><a href="#">Around Dufftown</a>
<ul>
<li><a href="#">Ar D 1</a></li>
<li><a href="#">Ar D 2</a></li>
<li><a href="#">Ar D 3</a></li>
<li><a href="#">Ar D 4</a></li>
</ul>
</li>
<li><a href="#">Cabrach</a>
<ul>
<li><a href="#">Cab1</a></li>
<li><a href="#">Cab2</a></li>
<li><a href="#">Cab3</a></li>
<li><a href="#">Cab4</a></li>
</ul>
</li>
<li><a href="#">Other</a>
<ul>
<li><a href="#">Oth1</a></li>
<li><a href="#">Oth2</a></li>
<li><a href="#">Oth3</a></li>
<li><a href="#">Oth4</a></li>
</ul>
</li>
<li><a href="#">Glenrinnes</a>
<ul>
<li><a href="#">Ben Rinnes</a></li>
<li><a href="#">the Glen</a></li>
</ul>
</li>
<li><a href="#">Glenlivet</a>
<ul>
<li><a href="#">GL1</a></li>
<li><a href="#">GL2</a></li>
<li><a href="#">GL3</a></li>
<li><a href="#">GL4</a></li>
</ul>
</li>
</ul>
<!--Top Drop Down Menu 2 BUSINESS HTML-->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Business1b</a></li>
<li><a href="#">Business2b</a></li>
<li><a href="#">Barry Biz</a>
<ul>
<li><a href="DDesign.html">Dufftown Design</a></li>
<li><a href="Laptop.html">Laptop Cleanup</a></li>
<li><a href="MyMovie.html">My Movie</a></li>
<li><a href="#">empty</a></li>
</ul>
</li>
<li><a href="#">Business 4b</a></li>
<li><a href="#">Business Folder 5b</a>
<ul>
<li><a href="#">Sub Business 5.1b</a></li>
<li><a href="#">Business Folder 5.2b</a>
<ul>
<li><a href="#">Sub Business 5.2.1b</a></li>
<li><a href="#">Sub Business 5.2.2b</a></li>
<li><a href="#">Sub Business 5.2.3b</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Business 6b</a></li>
</ul>
<!--Top Drop Down Menu 3 NEWS HTML-->
<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="http://www.">N1</a></li>
<li><a href="http://www.">N2</a></li>
<li><a href="http://www.">N3</a></li>
<li><a href="http://www.">N4</a></li>
<li><a href="http://www.">N5</a></li>
</ul>
<!--Top Drop Down Menu 4 EVENTS HTML-->
<ul id="ddsubmenu4" class="ddsubmenustyle">
<li><a href="http://www.">Ev1</a></li>
<li><a href="http://www.">Ev2</a></li>
<li><a href="http://www.">Ev3</a></li>
<li><a href="http://www.">Ev4</a></li>
<li><a href="http://www.">Ev5</a></li>
</ul>
<!--Top Drop Down Menu 5 MAPS HTML-->
<ul id="ddsubmenu5" class="ddsubmenustyle">
<li><a href="http://www.">Map 1</a></li>
<li><a href="http://www.">Map 2</a></li>
<li><a href="http://www.">Map 3</a></li>
</ul>
<!-- #EndEditable "SubMenu" -->
</body>
<!-- #EndTemplate -->
</html>


CSS


for base
/* ######### Drop Down ULs CSS ######### */


.ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: #FF0;
background-color: #000;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover{
background-color: #000;
color: #FFF;
}

/* ######### Neutral CSS ######### */

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}



for topbar
/* ######### Matt Black Strip Main Menu Bar CSS ######### */

.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #000;
overflow: hidden;
width: 100%;
}

.mattblackmenu li{
display: inline;
margin: 0;
}

.mattblackmenu li a{
position:relative;
top:0px;
left:10%;
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: #C30;
background: #6F3;
}

.mattblackmenu li a:visited{
color: #C30;
}

.mattblackmenu li a:hover{
background: #0C0; /*background of tabs for hover state */
}

.mattblackmenu a.selected{
background: #390; /*background of tab with "selected" class assigned to its LI */
}

ddadmin
09-22-2009, 06:03 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.