•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 330,223 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,963 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 376 | Replies: 1 | Solved
 |
•
•
Join Date: Feb 2008
Location: Houston, TX area
Posts: 8
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Hello,
Appreciate any help on this problem. I have coded a drop down menu that works great in FF, but in IE it won't close when you have moved off of the drop down table. Please review and let me know any ideas. Thank you! There are 4 parts of code relevant to the drop down menu and here they are:
1. The index.html piece (just the top 30 or so lines are shown from index.html:
2. menu.js
3. gold-menu.css
4. javascipts.js
Appreciate any help on this problem. I have coded a drop down menu that works great in FF, but in IE it won't close when you have moved off of the drop down table. Please review and let me know any ideas. Thank you! There are 4 parts of code relevant to the drop down menu and here they are:
1. The index.html piece (just the top 30 or so lines are shown from index.html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>The Stuff Safari</title>
<meta name="description" content="Civil War Collectibles and memorabilia"/>
<meta name="keywords" content="Collectibles, memorabilia"/>
<link rel="StyleSheet" href="css/common-style.css" type="text/css">
<link rel="StyleSheet" href="css/gold-menu.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="css/css.js"></script>
<script language="JavaScript" type="text/javascript" src="javascripts.js"></script>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#"><b>theStuffSafari</b>...</a></h1>
</div>
<div id="top">
<h1>...time to hunt down your treasure</h1>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="menu.js"></script>2. menu.js
<!-- Begin
document.write('<table cellpadding="0" cellspacing="0" border="0" class="menutable"><tr><td class="printhide">');
document.write('<ul id="menunav">');
// START MENU LINKS - EDIT BELOW THIS AREA
document.write('<li style="width: 124px;"><a href="index.html">Home</a></li>');
document.write(' <li style="width: 125px;"><a href="sports.htm">Sports Stuff</a>');
document.write(' <ul>');
document.write(' <li><a href="sports.htm">Sports Stuff</a></li>');
document.write(' <li><a href="sports.htm">Collectibles</a></li>');
document.write(' <li><a href="sports.htm">Memorabilia</a></li>');
document.write(' <li><a href="sports.htm">Sports Stuff articles</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 130px;"><a href="newsandlinks.htm">News & Links Stuff</a>');
document.write(' <ul>');
document.write(' <li><a href="newsandlinks.htm">Company News</a></li>');
document.write(' <li><a href="newsandlinks.htm">Links</a></li>');
document.write(' </ul>');
document.write(' </li>');
// END LINKS //
document.write('</ul>');
document.write('</td></tr></table>');
// END -->3. gold-menu.css
/* START THE CODE FOR THE MENUS */
/* MENU OUTER TABLE - BACKGROUND & TOP & BOTTOM MENU BORDERS */
.menutable {
clear: both;
float: none;
background-image: url("../images/menu.gif");
background-color: #C0C1B4;
white-space: nowrap;
width:760;
height: 30px;
border-top: #47473B 0px solid;
border-bottom: #47473B 1px solid;
padding: 0px;
margin: 0px auto;
}
/* CODE FOR MENU 2ND OUTER TABLE */
#menunav, #menunav ul {
float: left;
white-space: nowrap;
width: 760;
list-style: none;
padding: 0px;
border: solid #FFFFFF;
border-width: 0px 0px 0px 0px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
margin: 0px 0px 0px 0px;
}
/* TOP LEVEL MARGINS, FONT FACE & FONT COLORS & PADDING */
#menunav a {
color: #666666;
font: 12px arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 3px 5px 4px 5px;
width: auto;
display: block;
cursor: pointer;
}
/* TOP LEVEL BACKROUND COLOR AND BORDERS - EDIT MENU IMAGES ALSO */
#menunav li {
background-image: url("../images/menu.gif");
background-color: #C0C1B4;
border: solid #9E9E88;
border-width: 0px 1px 0px 0px; /* THIS IS A RIGHT BORDER */
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
float: left;
padding: 0;
}
/* TOP LEVEL HOVER FONT COLOR */
#menunav li a:hover {
background-image: url("../images/menuon.gif");
color: #000000;
text-decoration: none;
cursor: pointer;
}
/* TOP LEVEL HOVER BACKGROUND COLOR AND BORDERS - EDIT MENU IMAGES ALSO */
#menunav li:hover, #menunav li.IEMhover
{
background-color: #D0D0C5;
border: solid #9E9E88;
border-width: 0px 1px 0px 0px; /* THIS IS A RIGHT BORDER */
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
}
/* SUB LEVEL FONT & FONT COLOR & PADDING */
#menunav li ul a {
font: 11px verdana, arial, sans-serif;
color: #47473B;
font-weight: normal;
text-decoration: underline;
text-align: left;
padding: 4px 0px 4px 0px;
text-indent: 8px;
cursor: pointer;
}
/* SUB LEVEL FONT HOVER COLOR */
#menunav li ul a:hover {
background-image: none;
color: #000000;
text-decoration: none;
cursor: pointer;
}
/* SUB LEVEL OUTER BORDER */
#menunav li ul {
position: absolute;
left: -999em;
height: auto;
width: 165px;
border: solid #47473B;
border-width: 1px 1px 1px 1px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
margin: 0;
}
/* SUB LEVEL BACKGROUND COLOR & BORDER OPTION FOR EACH LINK */
#menunav li ul li {
background-image: none;
background-color: #FFFFFF;
border: solid #C0C0C0;
border-width: 1px 0px 0px 0px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
}
/* SUB LEVEL HOVER BACKGROUND AND BORDERS */
#menunav li ul li:hover, #menunav li ul li.IEMhover
{
background-image: none;
background-color: #F0F0F0;
border: solid #C0C0C0;
border-width: 1px 0px 0px 0px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
}
/* SUB MENU WIDTH - ALSO EDIT TWO BELOW AND ONE ABOVE TO MATCH */
#menunav li li {
padding-right: 0px;
width: 165px;
}
/* SUB MENU LINK WIDTH */
#menunav li ul a {
width: 165px;
}
/* FOR 3rd LEVEL MENU LOCATION */
#menunav li ul ul {
margin: -21px 0px 0px 160px;
}
#menunav li:hover ul ul, #menunav li:hover ul ul ul, #menunav li.IEMhover ul ul, #menunav li.IEMhover ul ul ul
{ left: -999em; }
#menunav li:hover ul, #menunav li li:hover ul, #menunav li li li:hover ul, #menunav li.IEMhover ul, #menunav li li.IEMhover ul, #menunav li li li.IEMhover ul
{ left: auto; }
/* FOR 3rd LEVEL ARROW */
#menunav a.parent {
background: url(../picts/menu-arrow.gif) center right no-repeat;
}
4. javascipts.js
<!-- Begin
function blockError(){return true;}
window.onerror = blockError;
// -->
•
•
Join Date: Feb 2008
Location: Houston, TX area
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Very happy to have found the fix to my problem. The fix is posted below.
Here is what was needed:
This code was added to the Stylesheet:
Here is what was needed:
This code was added to the Stylesheet:
#menu li:hover, #menu li.hover {
position: static;
} |
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
DaniWeb Marketplace (Sponsored Links)
Linear Mode
Similar Threads
- SpeedUp Your Window XP Never Than Before (Windows tips 'n' tweaks)
- XP not booting - lsass.exe not found (Windows NT / 2000 / XP / 2003)
Other Threads in the HTML and CSS Forum
- Previous Thread: page access problem
- Next Thread: Music in web Page.
