473,387 Members | 1,464 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Ul li drop down menu works in FF not quite in IE

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
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <!--    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">-->
  4.       <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  5.  
  6. <head>
  7.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  8.     <title>contact</title>
  9.     <link rel="stylesheet" href="ssf.css?126" type="text/css" media="screen, projection"/>
  10.     <script type="text/javascript" src="ts_picker.js">
  11.         //Script by Denis Gritcyuk: tspicker@yahoo.com
  12.         //Submitted to JavaScript Kit (http://javascriptkit.com)
  13.         //Visit http://javascriptkit.com for this script
  14.     </script>
  15.     <script type="text/javascript" src="jquery1.4.3min.js" ></script>
  16.     <script type="text/javascript"  src="jquery.dropdownPlain.js"></script>
  17. </head>
  18. <body>
  19.             <div id="header">
  20.                 <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>
  21.     <a class="header" href="index.php">Home</a>&nbsp;|&nbsp;
  22.     <a class="header" href="choosecust.php">Customers</a>&nbsp;|&nbsp;
  23.     <a class="header" href="order.php">New order</a>&nbsp;|&nbsp;
  24.     <a class="header" href="editcontact.php">New contact</a>&nbsp;|&nbsp;
  25.     <a class="header" href="addcust.php">New customer</a>&nbsp;|&nbsp;
  26.     <a class="header" href="addprod.php">New product</a>&nbsp;|&nbsp;
  27.     <a class="header" href="chooseorder.php">Orders</a>&nbsp;|&nbsp;
  28.     <a class="header" href="chooseordersnotbanked.php">Open Orders</a>&nbsp;|&nbsp;
  29.     <a class="header" href="chooseprod.php">Products</a>&nbsp;|&nbsp;
  30.     <a class="header" href="choosecontact.php">Contacts</a>&nbsp;|&nbsp;
  31.     <a class="header" href="chooseoldcust.php">Old Customers</a>&nbsp;|&nbsp;
  32.     <a class="header" href="choosefarmevent.php">Farm Events</a>&nbsp;|&nbsp;
  33.     <a class="header" href="report.php">Create New Report</a>&nbsp;|&nbsp;
  34.     <a class="header" href="chooseuser.php">Users</a>&nbsp;|&nbsp;
  35.     <a class="header" href="adduser.php">Add a new user</a>&nbsp;|&nbsp;<a class="header" href="logout.php">Logout</a>            </div><!-- /header -->
  36.     <div id="outer_wrapper">
  37.         <div id="wrapper">
  38.  
  39.  
  40.  
  41.             <div id="container">
  42.                 <div id="left">
  43.                 </div><!-- /left -->
  44.                 <div id="main">
  45.                 <p></p>
  46.                 <p class="right note"><acronym>*</acronym> required field</p>
  47.         <form id="frm_chk" name="frm_chk" method="post" action="updatecontact.php">
  48.                                 <p class="required">
  49.                 <label>Choose customer<acronym title="Required field">*</acronym></label>
  50.                 <select id="cust_id" type="text" class="txt" name="cust_id" title="Select Customer &ndash; Required" >
  51.                     <option value=""></option>
  52.                                     <option value="10164" >? Tarffelin</option></select></p>
  53.                                                     <p>&nbsp;</p>
  54.                                                     <p class="required">
  55.                         <label for="frm_chk_b_note">Note&nbsp;<acronym title="Required field">*</acronym></label>
  56.                         <textarea id="note" name="note" title="Note" cols = "40" rows="6"></textarea>
  57.                 </p>
  58.                 <p>&nbsp;</p>            
  59.                 <p class="required">
  60.                                                         <label for="frm_chk_b_datefornextcontact">Date of Next Contact&nbsp;<acronym title="Required field">*</acronym></label>
  61.                     <input type="text" name="datefornextcontact" id="datefornextcontact" title="date next contact &ndash; Required" class="txt" value="24-11-2010"/>
  62.                     <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>
  63.                 </p>
  64.                 <p>&nbsp;</p>            
  65.                                         <p class="required">
  66.                         <label for="frm_chk_b_by">bywhom&nbsp;<acronym title="Required field">*</acronym></label>
  67.                         <select id="bywhom" type="textarea" class="txt" name="bywhom" title="bywhom &ndash; Required" >
  68.                             <option value=""></option>
  69.                                 <option value="Ad" >Ad</option></select>
  70.                 </p>
  71.             </div><!-- /main -->
  72.                             <!-- This is for NN6 -->
  73.         <div class="clearing">&nbsp;</div>
  74.         </div><!-- /container -->
  75.             <div id="sidebar">
  76.                                                 </div><!-- /sidebar -->
  77.                                 <!-- This is for NN4 -->
  78.                                 <div class="clearing">&nbsp;</div>
  79.             <div id="footer">
  80.                     <a class="header" href="javascript:history.go(-1)">Back</a>
  81.                     <input type="submit" value="Add contact" class="button"/>
  82.             </div><!-- /footer -->
  83.         </div><!-- /wrapper -->
  84.     </div><!-- /outer_wrapper -->
  85. </form>
  86. </body>
  87. </html>
  88.  
  89.  
And now the CSS

Expand|Select|Wrap|Line Numbers
  1. .error{
  2.     color:#FF0000;
  3. }
  4. body{
  5. font-family: Trebuchet MS, Arial;
  6. font-size: 80%;
  7. }
  8. p {
  9.     font-family: Trebuchet MS, Ariel;
  10.     font-size: 12px;
  11.     line-height: 12px;
  12.     color: #006666;
  13.     text-align: left;
  14. }
  15. p + p {
  16.     margin-bottom: 1em;
  17. }
  18. pspace {
  19.     font-size: 2px;
  20.     line-height: 2px;
  21. }
  22. p.headerright {
  23.     font-family: Trebuchet MS, Ariel;
  24.     font-size: 12px;
  25.     line-height: 12px;
  26.     color: #006666;
  27.     text-align: right;
  28. }
  29. /* Copyright 2004 - 2006 - All Rights Reserved - Thierry Koblentz - www.TJKDesign.com */
  30. #outer_wrapper {
  31. /* because "min-width" is not supported by IE, these pages use a script from PVII */
  32. min-width:740px;
  33. /* 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 */
  34. width:100%;
  35. /* faux-column technique, this is the left one */
  36. background:#fff url(left.gif) repeat-y left
  37. }
  38. #wrapper {
  39. /* faux-column technique, this is the right one */
  40. background:#fff url(right.gif) repeat-y right
  41. }
  42. #header {
  43. border:4px solid #394A1A;
  44. color:#FFBC3D;
  45. background:#394A1A;
  46. /* this is to "give layout" to the element and fix some peek-a-boo bug in  IE (v6 sp2) */
  47. width:100%;
  48. /* the above declaration creates an horizontal scroll bar in IE, this is to get rid of it */
  49. margin:0 -1px
  50. }
  51. #container {
  52. float:left;
  53. width:75%;
  54. /* IE doubles the margins on floats, this takes care of the problem */
  55. display:inline;
  56. /* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
  57. margin-left:-200px
  58. }
  59. #left {
  60. float:left;
  61. width:350px;
  62. /* IE doubles the margins on floats, this takes care of the problem */
  63. display:inline;
  64. margin-left:200px
  65. }
  66. #leftwide {
  67. float:left;
  68. width:700px;
  69. /* IE doubles the margins on floats, this takes care of the problem */
  70. display:inline;
  71. margin-left:200px
  72. }
  73. #leftreallywide {
  74. float:left;
  75. width:1000px;
  76. /* IE doubles the margins on floats, this takes care of the problem */
  77. display:inline;
  78. margin-left:200px
  79. }
  80. #main {
  81. /* the width from #left (150px) + the negative margin from #container (200px) */
  82. margin-left:550px;
  83. background:#FFFFFF;
  84. }
  85. /* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
  86. #sidebarnarrow {
  87. float:right;
  88. width:200px;
  89. /* IE doubles the margins on floats, this takes care of the problem */
  90. display:inline;
  91. margin-left:100px
  92. }
  93. #sidebar {
  94. /* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
  95. padding-left:75%;
  96. /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
  97. margin-left:-200px
  98. }
  99. #sidebar p {
  100. /* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */
  101. position:relative
  102. }
  103. #sidebar2 {
  104. /* this is to keep the content of #sidebar2 to the right of #main even if the content of "main is shorter */
  105. padding-left:50%;
  106. /* this is to "bring back" the #sidebar2 that has been moved out of the viewport because of the padding value */
  107. margin-left:-200px
  108. }
  109. #sidebar2 p {
  110. /* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */
  111. position:relative
  112. }
  113. #footer {
  114. /* see #outer_wrapper  */
  115. text-align: center;
  116. width:100%;
  117. /* this is to clear #container */
  118. clear:both;
  119. border-top:1px solid #394A1A;
  120. border-bottom:1px solid #394A1A;
  121. background:#394A1A}
  122. a.footer:hover{text-decoration:underline !important;}
  123. a.header:hover{text-decoration:underline !important;}
  124. 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 {
  125.     color:#FFBC3D;
  126.     font-family: Trebuchet MS, Ariel;
  127.     font-size: 110%;
  128. }
  129. a.headercenter {
  130.     color:#FFBC3D;
  131.     font-family: Trebuchet MS, Ariel;
  132.     font-size: 110%;
  133.     text-align: center
  134. }
  135. /* 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 */
  136. .clearing {height:0;clear:both}
  137. .button {
  138.     border: 1px solid #FFBC3D;
  139.     background: #394A1A;
  140.     color: #FFBC3D;
  141. }
  142. .button:hover {
  143.     border: 1px solid #FFBC3D;
  144.     background: #394A1A;
  145.     color: #FFBC3D;
  146. }
  147. .rbutton {
  148.     border: 1px solid #394A1A;
  149.     background: #FFBC3D;
  150.     color: #394A1A;
  151. }
  152. .rbutton:hover {
  153.     border: 1px solid #394A1A;
  154.     background: #FFBC3D;
  155.     color: #394A1A;
  156. }
  157. label {
  158.     display: block;
  159.     width: 100px;
  160.     float: left;
  161.     margin: 2px 4px 6px 4px;
  162.     text-align: left;
  163. }
  164. label2 {
  165.     display: inline;
  166.     width: 120px;
  167.     float: left;
  168.     margin: 2px 4px 6px 4px;
  169.     text-align: left;
  170. }
  171. .required input.txt, input.txt, textarea, select, select.txt, form .required select{
  172.     border-left:2px solid #394A1A;
  173.     border-top:1px solid #394A1A;
  174.     border-right:1px solid #394A1A;
  175.     border-bottom:1px solid #394A1A;
  176. }
  177. textarea {
  178.     background: #FFFFFF;
  179.     border-left:2px solid #394A1A;
  180.     border-top:1px solid #394A1A;
  181.     border-right:1px solid #394A1A;
  182.     border-bottom:1px solid #394A1A;
  183. }
  184. .required label{
  185.     font-weight:bold;
  186.     text-align: left;
  187. }
  188. acronym {
  189.     color: #FF0000;
  190. }
  191. .lighttr {
  192.     background: #F0E68C/*#FFB6C1 #FFE3B3*/;
  193.     font-family: Trebuchet MS, Ariel;
  194.     font-size: 12px;
  195.     white-space: nowrap;
  196.     height: 17px;
  197. }
  198. .darktr {
  199.     background: #B0C4DE/*#87CEFA #BED890*/;
  200.     font-family: Trebuchet MS, Ariel;
  201.     font-size: 12px;
  202.     white-space: nowrap;
  203.     height: 17px;
  204. }
  205. .txt {
  206.     border: 0.5px solid #394A1A;
  207.     background: #fff;
  208.     font-family: Trebuchet MS, Ariel;
  209.     font-size: 12px;
  210.     /*white-space: nowrap;*/
  211.     height: 19px;
  212. }
  213. .txt2 {
  214.     border: 0.5px solid #394A1A;
  215.     background: #fff;
  216.     font-family: Trebuchet MS, Ariel;
  217. }
  218. .txt3 {
  219.     border: 0.5px solid #394A1A;
  220.     background: #fff;
  221.     font-family: Trebuchet MS, Ariel;
  222.     font-size: 39px;
  223.     white-space: nowrap;
  224.     height: 55px;
  225. }
  226. .testsmall {
  227.     border: 0px solid #394A1A;
  228.     background: #fff;
  229.     font-family: Trebuchet MS, Ariel;
  230.     font-size: 9px;
  231.         /*white-space: nowrap;
  232. height: 17px;*/
  233. }
  234. .bwlighttr {
  235.     background: #FFFFFF;
  236. }
  237. .bwdarktr {
  238.     background: #E2E2E2;
  239. }
  240. a.chooser:hover{text-decoration:underline !important;}
  241. .chooser{
  242.     color:#000000;
  243.     font-family: Trebuchet MS, Ariel;
  244.     font-size: 11px;
  245. }
  246. .chooser .selected, a.chooser:active, a.chooser:visited:active, a.chooser:hover, #chooser .selected{
  247.     color:#000000;
  248.     font-family: Trebuchet MS, Ariel;
  249.     font-size: 11px;
  250. }
  251. a.chooserred:hover{text-decoration:underline !important;}
  252. .chooserred{
  253.     color:#FF0000;
  254.     font-family: Trebuchet MS, Ariel;
  255.     font-size: 11px;
  256. }
  257. .chooserred .selected, a.chooserred:active, a.chooserred:visited:active, a.chooserred:hover, #chooserred .selected{
  258.     color:#FF0000;
  259.     font-family: Trebuchet MS, Ariel;
  260.     font-size: 11px;
  261. }
  262. .login {
  263. text-align: center;
  264.  }
  265. #info {
  266. text-align: center;
  267.  }
  268. .print{
  269. font-family: Trebuchet MS, Arial;
  270. font-size: 13px;
  271. }
  272. .formfloatleft {
  273.         float: left
  274. }
  275. .formfloatright {
  276.         float: right
  277. }
  278. .left {
  279.     text-align: left
  280. }
  281. /* Now the stuff for drop down menu*/
  282. /* 
  283.     LEVEL ONE
  284. */
  285. ul.dropdown                    { position: relative; display: inline; width: 150px;} /*positions the menu*/
  286. ul.dropdown li                    { list-style:none; display: inline; float: left; background: #394A1A; /* green for the reports menu item at the top*/}
  287. ul.dropdown a:hover         { background: #FFBC3D; /*yellow orange*/  color:#394A1A; /*green*/  }
  288. 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*/
  289. ul.dropdown li a                { display: block; color: #C6B5E5; /*purple*/ font-weight: bold;} /*sets the colour of the reports menu item text*/
  290. 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*/
  291. ul.dropdown li.hover,
  292. ul.dropdown li:hover            { position: relative;} /* places the submenu at bottom right of reports menu item*/
  293. 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*/
  294.  
  295. ul.submenu li a                {font-weight: normal; text-decoration: none; color:#394A1A;} /*text on submenu*/
  296. /*other submenu css inheritied from dropdown class*/
  297.  
  298. /* 
  299.     LEVEL TWO
  300. */
  301. ul.dropdown ul                         { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
  302. ul.dropdown ul li                     { font-weight: normal; background: #E4E6E0;/*silver*/ border-bottom: 1px solid #717d5a;/*sage*/ float: none; }
  303.  
  304.                                     /* IE 6 & 7 Needs Inline Block */
  305. ul.dropdown ul li a                    { border-right: none; width: 100%; display: inline-block; } 
  306.  
  307. /* 
  308.     LEVEL THREE
  309. */
  310. ul.dropdown ul ul                     { left: 100%; top: 0; }
  311. ul.dropdown li:hover > ul             { visibility: visible; }
  312.  
  313.  
  314.  
And the jquery

Expand|Select|Wrap|Line Numbers
  1. /*with thanks to css-tricks.com*/
  2. $(function(){
  3.  
  4.     $("ul.submenu li").hover(function(){
  5.  
  6.         $(this).addClass("hover");
  7.         $('ul:first',this).css('visibility', 'visible');
  8.  
  9.     }, function(){
  10.  
  11.         $(this).removeClass("hover");
  12.         $('ul:first',this).css('visibility', 'hidden');
  13.  
  14.     });
  15.  
  16.     $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
  17.  
  18. });
  19.  
Attached Files
File Type: zip jquery.dropdownPlain.zip (4.7 KB, 91 views)
Nov 24 '10 #1
0 2161

Sign in to post your reply or Sign up for a free account.

Similar topics

6
by: Greg Scharlemann | last post by:
I am attempting to populate a drop down menu based on the selection of a different drop down menu. However, it is not working correctly, I cannot figure out for the life of me what exactly happens...
10
by: Haines Brown | last post by:
I've implemented the horizontal drop down menu discussed recently in this newsgroup, and it works nicely under Galeon and Mozilla, but not IE 5.0. Here are the problems: Under IE 5.0, the...
2
by: hemanth.singamsetty | last post by:
Hello there, I've a drop down menu (created using CSS & Javascript -- see code below). My problem is, whenever I click a link on the menu the new page replaces the current page (and the menu...
3
by: scaredemz | last post by:
hi, so i'm creating a dynamic drop-down menu. the menu and the text show up fine in IE but only the drop-down shows in Firefox without the menu text. Below is the fxn code. help pls. function...
3
by: rsteph | last post by:
I have a javascript drop down menu that I borrowed from a website. It utilizes a little .css to help with formatting. The menu works great, and on all 3 of the browsers I'm concerned about; but I am...
4
by: TycoonUK | last post by:
Hi, As I do not have IE7 on my computer, I was wondering if there is a fault in my CSS Menu when using IE7. Please can someone look at my site - http://www.worldofmonopoly.co.uk and tell me...
3
by: SQLjunky | last post by:
Hello, Contrary to what my screen name indicates, i'm actually quite new to SQL. Having said that, I'll get right into my problem. I'm trying to query an mssql database to return to the value...
22
by: Archanak | last post by:
Hi, I am using 2-level CSS Drop Down Menu in my perl/CGI program. here is the code. #!c:/perl/bin/perl.exe use CGI qw(:standard);
6
by: jscore | last post by:
I'm trying to create a drop down menu based off of some tutorials, but am having trouble. Link: http://drc.usask.ca/projects/emet/indextest.html css: http://drc.usask.ca/projects/emet/emet.css ...
5
by: nfarrier | last post by:
I'm a school teacher trying to get a web page update working doing a drop-down menu. The code works at http://hms.sps.lane.edu but the update that uses more css, including "navigation body"...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.