Ul li drop down menu works in FF not quite in IE
Thank you for looking at this. The page is generated dynamically by php, js and jquery. The drop down menu ul- reports-li - works fine in FF. In IE7 the menu displays and if I am very very careful with how I move the mouse I can sometimes manage to catch the submenu - particularly the first time the page is displayed. Usually the menu disappears before I can mouse over it. I guess this is something to do with the css and IE. All thoughts gratefully received - thanks. Please excuse the long code but I have copied the html, css and jquery in full. Where it starts to go wrong in IE7 I have highlighted in bold.
the HTML
And now the CSS
And the jquery
Thank you for looking at this. The page is generated dynamically by php, js and jquery. The drop down menu ul- reports-li - works fine in FF. In IE7 the menu displays and if I am very very careful with how I move the mouse I can sometimes manage to catch the submenu - particularly the first time the page is displayed. Usually the menu disappears before I can mouse over it. I guess this is something to do with the css and IE. All thoughts gratefully received - thanks. Please excuse the long code but I have copied the html, css and jquery in full. Where it starts to go wrong in IE7 I have highlighted in bold.
the HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>contact</title>
<link rel="stylesheet" href="ssf.css?126" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="ts_picker.js">
//Script by Denis Gritcyuk: tspicker@yahoo.com
//Submitted to JavaScript Kit (http://javascriptkit.com)
//Visit http://javascriptkit.com for this script
</script>
<script type="text/javascript" src="jquery1.4.3min.js" ></script>
<script type="text/javascript" src="jquery.dropdownPlain.js"></script>
</head>
<body>
<div id="header">
[B]<ul class="dropdown"><li><a href="#">Reports</a><ul class="submenu"><li>[/B]<a href="printreportformenu.php?reports_id=9">Breeding Cows</a></li><li><a href="printreportformenu.php?reports_id=8">Breeding Stock Ages</a></li><li><a href="printreportformenu.php?reports_id=25">Customer most recent orders for each product</a></li><li><a href="printreportformenu.php?reports_id=23">Customer order summary complete</a></li><li><a href="printreportformenu.php?reports_id=19">Customers with NO home phone</a></li><li><a href="printreportformenu.php?reports_id=32">Fat Stock by eartag sequential</a></li><li><a href="printreportformenu.php?reports_id=31">Fat Stock by Gender and Age</a></li><li><a href="printreportformenu.php?reports_id=13">Fat Stock Details</a></li><li><a href="printreportformenu.php?reports_id=14">Fat Stock to butcher</a></li><li><a href="printreportformenu.php?reports_id=28">InvoiceForOrderSQL</a></li><li><a href="printreportformenu.php?reports_id=21">Movement records</a></li><li><a href="printreportformenu.php?reports_id=26">Muck Spreading Records</a></li><li><a href="printreportformenu.php?reports_id=7">reports</a></li><li><a href="printreportformenu.php?reports_id=29">Sales per Beef Animal - Detail</a></li><li><a href="printreportformenu.php?reports_id=30">Sales per Beef Animal - summary</a></li><li><a href="printreportformenu.php?reports_id=20">Silage Bales 2010</a></li><li><a href="printreportformenu.php?reports_id=17">Unpaid Orders</a></li><li><a href="printreportformenu.php?reports_id=2">Users</a></li><li><a href="printreportformenu.php?reports_id=27">Veterinary</a></li></ul></li></ul>
<a class="header" href="index.php">Home</a> |
<a class="header" href="choosecust.php">Customers</a> |
<a class="header" href="order.php">New order</a> |
<a class="header" href="editcontact.php">New contact</a> |
<a class="header" href="addcust.php">New customer</a> |
<a class="header" href="addprod.php">New product</a> |
<a class="header" href="chooseorder.php">Orders</a> |
<a class="header" href="chooseordersnotbanked.php">Open Orders</a> |
<a class="header" href="chooseprod.php">Products</a> |
<a class="header" href="choosecontact.php">Contacts</a> |
<a class="header" href="chooseoldcust.php">Old Customers</a> |
<a class="header" href="choosefarmevent.php">Farm Events</a> |
<a class="header" href="report.php">Create New Report</a> |
<a class="header" href="chooseuser.php">Users</a> |
<a class="header" href="adduser.php">Add a new user</a> | <a class="header" href="logout.php">Logout</a> </div><!-- /header -->
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="left">
</div><!-- /left -->
<div id="main">
<p></p>
<p class="right note"><acronym>*</acronym> required field</p>
<form id="frm_chk" name="frm_chk" method="post" action="updatecontact.php">
<p class="required">
<label>Choose customer<acronym title="Required field">*</acronym></label>
<select id="cust_id" type="text" class="txt" name="cust_id" title="Select Customer – Required" >
<option value=""></option>
<option value="10164" >? Tarffelin</option></select></p>
<p> </p>
<p class="required">
<label for="frm_chk_b_note">Note <acronym title="Required field">*</acronym></label>
<textarea id="note" name="note" title="Note" cols = "40" rows="6"></textarea>
</p>
<p> </p>
<p class="required">
<label for="frm_chk_b_datefornextcontact">Date of Next Contact <acronym title="Required field">*</acronym></label>
<input type="text" name="datefornextcontact" id="datefornextcontact" title="date next contact – Required" class="txt" value="24-11-2010"/>
<a href="javascript:show_calendar('document.frm_chk.datefornextcontact', document.frm_chk.datefornextcontact.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>
</p>
<p> </p>
<p class="required">
<label for="frm_chk_b_by">bywhom <acronym title="Required field">*</acronym></label>
<select id="bywhom" type="textarea" class="txt" name="bywhom" title="bywhom – Required" >
<option value=""></option>
<option value="Ad" >Ad</option></select>
</p>
</div><!-- /main -->
<!-- This is for NN6 -->
<div class="clearing"> </div>
</div><!-- /container -->
<div id="sidebar">
</div><!-- /sidebar -->
<!-- This is for NN4 -->
<div class="clearing"> </div>
<div id="footer">
<a class="header" href="javascript:history.go(-1)">Back</a>
<input type="submit" value="Add contact" class="button"/>
</div><!-- /footer -->
</div><!-- /wrapper -->
</div><!-- /outer_wrapper -->
</form>
</body>
</html>
Code:
.error{
color:#FF0000;
}
body{
font-family: Trebuchet MS, Arial;
font-size: 80%;
}
p {
font-family: Trebuchet MS, Ariel;
font-size: 12px;
line-height: 12px;
color: #006666;
text-align: left;
}
p + p {
margin-bottom: 1em;
}
pspace {
font-size: 2px;
line-height: 2px;
}
p.headerright {
font-family: Trebuchet MS, Ariel;
font-size: 12px;
line-height: 12px;
color: #006666;
text-align: right;
}
/* Copyright 2004 - 2006 - All Rights Reserved - Thierry Koblentz - www.TJKDesign.com */
#outer_wrapper {
/* because "min-width" is not supported by IE, these pages use a script from PVII */
min-width:740px;
/* this is to "minimize" an IE bug related to background painting, but because it creates a gap below the footer, the same declaration is also added to #footer */
width:100%;
/* faux-column technique, this is the left one */
background:#fff url(left.gif) repeat-y left
}
#wrapper {
/* faux-column technique, this is the right one */
background:#fff url(right.gif) repeat-y right
}
#header {
border:4px solid #394A1A;
color:#FFBC3D;
background:#394A1A;
/* this is to "give layout" to the element and fix some peek-a-boo bug in IE (v6 sp2) */
width:100%;
/* the above declaration creates an horizontal scroll bar in IE, this is to get rid of it */
margin:0 -1px
}
#container {
float:left;
width:75%;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
/* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
margin-left:-200px
}
#left {
float:left;
width:350px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:200px
}
#leftwide {
float:left;
width:700px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:200px
}
#leftreallywide {
float:left;
width:1000px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:200px
}
#main {
/* the width from #left (150px) + the negative margin from #container (200px) */
margin-left:550px;
background:#FFFFFF;
}
/* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
#sidebarnarrow {
float:right;
width:200px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:100px
}
#sidebar {
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left:75%;
/* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left:-200px
}
#sidebar p {
/* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */
position:relative
}
#sidebar2 {
/* this is to keep the content of #sidebar2 to the right of #main even if the content of "main is shorter */
padding-left:50%;
/* this is to "bring back" the #sidebar2 that has been moved out of the viewport because of the padding value */
margin-left:-200px
}
#sidebar2 p {
/* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */
position:relative
}
#footer {
/* see #outer_wrapper */
text-align: center;
width:100%;
/* this is to clear #container */
clear:both;
border-top:1px solid #394A1A;
border-bottom:1px solid #394A1A;
background:#394A1A}
a.footer:hover{text-decoration:underline !important;}
a.header:hover{text-decoration:underline !important;}
a.footer, a.header, a.footer:active, a.header:visited:active, a.footer:visited:active, a.footer:hover, a.header:hover, a.header:active, #footer .selected, #header .selected {
color:#FFBC3D;
font-family: Trebuchet MS, Ariel;
font-size: 110%;
}
a.headercenter {
color:#FFBC3D;
font-family: Trebuchet MS, Ariel;
font-size: 110%;
text-align: center
}
/* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
.clearing {height:0;clear:both}
.button {
border: 1px solid #FFBC3D;
background: #394A1A;
color: #FFBC3D;
}
.button:hover {
border: 1px solid #FFBC3D;
background: #394A1A;
color: #FFBC3D;
}
.rbutton {
border: 1px solid #394A1A;
background: #FFBC3D;
color: #394A1A;
}
.rbutton:hover {
border: 1px solid #394A1A;
background: #FFBC3D;
color: #394A1A;
}
label {
display: block;
width: 100px;
float: left;
margin: 2px 4px 6px 4px;
text-align: left;
}
label2 {
display: inline;
width: 120px;
float: left;
margin: 2px 4px 6px 4px;
text-align: left;
}
.required input.txt, input.txt, textarea, select, select.txt, form .required select{
border-left:2px solid #394A1A;
border-top:1px solid #394A1A;
border-right:1px solid #394A1A;
border-bottom:1px solid #394A1A;
}
textarea {
background: #FFFFFF;
border-left:2px solid #394A1A;
border-top:1px solid #394A1A;
border-right:1px solid #394A1A;
border-bottom:1px solid #394A1A;
}
.required label{
font-weight:bold;
text-align: left;
}
acronym {
color: #FF0000;
}
.lighttr {
background: #F0E68C/*#FFB6C1 #FFE3B3*/;
font-family: Trebuchet MS, Ariel;
font-size: 12px;
white-space: nowrap;
height: 17px;
}
.darktr {
background: #B0C4DE/*#87CEFA #BED890*/;
font-family: Trebuchet MS, Ariel;
font-size: 12px;
white-space: nowrap;
height: 17px;
}
.txt {
border: 0.5px solid #394A1A;
background: #fff;
font-family: Trebuchet MS, Ariel;
font-size: 12px;
/*white-space: nowrap;*/
height: 19px;
}
.txt2 {
border: 0.5px solid #394A1A;
background: #fff;
font-family: Trebuchet MS, Ariel;
}
.txt3 {
border: 0.5px solid #394A1A;
background: #fff;
font-family: Trebuchet MS, Ariel;
font-size: 39px;
white-space: nowrap;
height: 55px;
}
.testsmall {
border: 0px solid #394A1A;
background: #fff;
font-family: Trebuchet MS, Ariel;
font-size: 9px;
/*white-space: nowrap;
height: 17px;*/
}
.bwlighttr {
background: #FFFFFF;
}
.bwdarktr {
background: #E2E2E2;
}
a.chooser:hover{text-decoration:underline !important;}
.chooser{
color:#000000;
font-family: Trebuchet MS, Ariel;
font-size: 11px;
}
.chooser .selected, a.chooser:active, a.chooser:visited:active, a.chooser:hover, #chooser .selected{
color:#000000;
font-family: Trebuchet MS, Ariel;
font-size: 11px;
}
a.chooserred:hover{text-decoration:underline !important;}
.chooserred{
color:#FF0000;
font-family: Trebuchet MS, Ariel;
font-size: 11px;
}
.chooserred .selected, a.chooserred:active, a.chooserred:visited:active, a.chooserred:hover, #chooserred .selected{
color:#FF0000;
font-family: Trebuchet MS, Ariel;
font-size: 11px;
}
.login {
text-align: center;
}
#info {
text-align: center;
}
.print{
font-family: Trebuchet MS, Arial;
font-size: 13px;
}
.formfloatleft {
float: left
}
.formfloatright {
float: right
}
.left {
text-align: left
}
/* Now the stuff for drop down menu*/
/*
LEVEL ONE
*/
ul.dropdown { position: relative; display: inline; width: 150px;} /*positions the menu*/
ul.dropdown li { list-style:none; display: inline; float: left; background: #394A1A; /* green for the reports menu item at the top*/}
ul.dropdown a:hover { background: #FFBC3D; /*yellow orange*/ color:#394A1A; /*green*/ }
ul.dropdown a:active { color: #FFBC3D; /*yellow orange*/}/*has no impact but has to be here in front of pseudo class hover otherwise hover doesn't work*/
ul.dropdown li a { display: block; color: #C6B5E5; /*purple*/ font-weight: bold;} /*sets the colour of the reports menu item text*/
ul.dropdown li:last-child a { border-right: none;} /* Doesn't work in IE and affects the reports menu item not the drop down list*/
ul.dropdown li.hover,
ul.dropdown li:hover { position: relative;} /* places the submenu at bottom right of reports menu item*/
ul.dropdown li.hover a { font-weight: normal; background: #394A1A; /*green*/ color: #FFBC3D; /*yellow orange*/ } /* text on submenu when hoverd - depends on jquery.dropdownplain.js*/
ul.submenu li a {font-weight: normal; text-decoration: none; color:#394A1A;} /*text on submenu*/
/*other submenu css inheritied from dropdown class*/
/*
LEVEL TWO
*/
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li { font-weight: normal; background: #E4E6E0;/*silver*/ border-bottom: 1px solid #717d5a;/*sage*/ float: none; }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
/*
LEVEL THREE
*/
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
Code:
/*with thanks to css-tricks.com*/
$(function(){
$("ul.submenu li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});