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
Expand|Select|Wrap|Line Numbers
- <!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">
- <ul class="dropdown"><li><a href="#">Reports</a><ul class="submenu"><li><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>
Expand|Select|Wrap|Line Numbers
- .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; }
Expand|Select|Wrap|Line Numbers
- /*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(" » ");
- });