473,322 Members | 1,345 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,322 software developers and data experts.

Menu Works in Mozilla but doesn't work in IE

Hi,

Can anybody please help me with this problem.
In my application, I'm using Menus. and the CSS for the menu is as given below


ccMenu.css

Expand|Select|Wrap|Line Numbers
  1. /* Root = Horizontal, Secondary = Vertical */
  2. ul#navmenu {
  3.   margin: 0;
  4.   border: 0 none;
  5.   padding: 0;
  6.   /*width changed from 500px to 600px*/
  7.   width: 500px; /*For KHTML*/
  8.   list-style: none;
  9.   height: 24px;
  10. }
  11.  
  12. ul#navmenu li {
  13.   margin: 0;
  14.   border: 0 none;
  15.   padding: 0;
  16.   float: left; /*For Gecko*/
  17.   display: inline;
  18.   list-style: none;
  19.   position: relative;
  20.   height: 24px;
  21. }
  22.  
  23. ul#navmenu ul {
  24.   margin: 0;
  25.   border: 0 none;
  26.   padding: 0;
  27.   width: 160px;
  28.   list-style: none;
  29.   display: none;
  30.   position: absolute;
  31.   top: 24px;
  32.   left: 0;
  33. }
  34.  
  35. ul#navmenu ul li {
  36.   float: none; /*For Gecko*/
  37.   display: block !important;
  38.   display: inline; /*For IE*/
  39. }
  40.  
  41. /* Root Menu */
  42. ul#navmenu a {
  43.   border: 1px solid #FFF;
  44.   border-right-color: #CCC;
  45.   border-bottom-color: #CCC;
  46.   padding: 0 6px;
  47.   float: none !important; /*For Opera*/
  48.   float: left; /*For IE*/
  49.   display: block;
  50.   background: #EEE;
  51.   color: #666;
  52.   font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
  53.   text-decoration: none;
  54.   height: auto !important;
  55.   height: 1%; /*For IE*/
  56. }
  57.  
  58. /* Root Menu Hover Persistence */
  59. ul#navmenu a:hover,
  60. ul#navmenu li:hover a,
  61. ul#navmenu li.iehover a {
  62.   background: #CCC;
  63.   color: #FFF;
  64. }
  65.  
  66. /* 2nd Menu */
  67. ul#navmenu li:hover li a,
  68. ul#navmenu li.iehover li a {
  69.   float: none;
  70.   background: #EEE;
  71.   color: #666;
  72. }
  73.  
  74. /* 2nd Menu Hover Persistence */
  75. ul#navmenu li:hover li a:hover,
  76. ul#navmenu li:hover li:hover a,
  77. ul#navmenu li.iehover li a:hover,
  78. ul#navmenu li.iehover li.iehover a {
  79.   background: #CCC;
  80.   color: #FFF;
  81. }
  82.  
  83. /* 3rd Menu */
  84. ul#navmenu li:hover li:hover li a,
  85. ul#navmenu li.iehover li.iehover li a {
  86.   background: #EEE;
  87.   color: #666;
  88. }
  89.  
  90. /* 3rd Menu Hover Persistence */
  91. ul#navmenu li:hover li:hover li a:hover,
  92. ul#navmenu li:hover li:hover li:hover a,
  93. ul#navmenu li.iehover li.iehover li a:hover,
  94. ul#navmenu li.iehover li.iehover li.iehover a {
  95.   background: #CCC;
  96.   color: #FFF;
  97. }
  98.  
  99. /* 4th Menu */
  100. ul#navmenu li:hover li:hover li:hover li a,
  101. ul#navmenu li.iehover li.iehover li.iehover li a {
  102.   background: #EEE;
  103.   color: #666;
  104. }
  105.  
  106. /* 4th Menu Hover */
  107. ul#navmenu li:hover li:hover li:hover li a:hover,
  108. ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  109.   background: #CCC;
  110.   color: #FFF;
  111. }
  112.  
  113. ul#navmenu ul ul,
  114. ul#navmenu ul ul ul {
  115.   display: none;
  116.   position: absolute;
  117.   top: 0;
  118.   left: 160px;
  119. }
  120.  
  121. /* Do Not Move - Must Come Before display:block for Gecko */
  122. ul#navmenu li:hover ul ul,
  123. ul#navmenu li:hover ul ul ul,
  124. ul#navmenu li.iehover ul ul,
  125. ul#navmenu li.iehover ul ul ul {
  126.   display: none;
  127. }
  128.  
  129. ul#navmenu li:hover ul,
  130. ul#navmenu ul li:hover ul,
  131. ul#navmenu ul ul li:hover ul,
  132. ul#navmenu li.iehover ul,
  133. ul#navmenu ul li.iehover ul,
  134. ul#navmenu ul ul li.iehover ul {
  135.   display: block;
  136. }
the same CSS works in Mozlla but doesn't work on IE.

my jsp page is like this

linksMenu.jsp

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.     <title>Child Tracking System</title>
  4.         <script src="js/links.js" type = "text/javascript"></script>
  5.  
  6.        <link href="css/style.css" rel="stylesheet" type="text/css">
  7.         <link href="css/displaytagex.css" rel="stylesheet" type="text/css">
  8.         <link href="css/ccMenu.css" rel="stylesheet" type="text/css">
  9.         <link href="css/egovModified.css" rel="stylesheet" type="text/css">
  10.  
  11.          <jsp:include page="authenticate.jsp" />
  12.  
  13. </head>
  14.  
  15.  
  16. <body onload='getDistricts();' id="bodyArea" style="background-image: url('img/sides_body_wide.gif'); background-color:'#666';background-attachment: fixed; width: 100%; background-position: center top; overflow-x: hidden;">
  17.  
  18. <!--------- START HEADER --------> 
  19.             <jsp:include page="incl/header.jsp" />
  20. <!--------- END HEADER -------->             
  21.  
  22.  
  23.  
  24. <td>
  25.  
  26. <Center>
  27. <table align="center" width="90%">
  28. <form name="links"  method="get"  target="_self">
  29. <center>
  30.  
  31. <table width="1002px" align="justify" style="background-color: transparent; font color="#9933ff""  border="0" cellpadding="0" cellspacing="5" >
  32.  
  33. <table align="center" border="0" cellpadding="1" cellspacing="0" width="743">
  34. <tr>
  35. <td align="justify" width="100%"> &nbsp;     
  36. District: 
  37. <select class="style01" id=district name="district" onchange='getBlock("block"); clearTable();' 
  38. style=" width: 50mm;font-family: Georgia; border-style: double" size="1" tabindex="1" width="40" >
  39. </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
  40.  
  41. Block:&nbsp; 
  42. <select class="style01"  id=block name="block" 
  43. onchange=' getCluster("cluster");clearTable();' 
  44. style="width: 80mm;font-family: Georgia; border-style: double" size="1" tabindex="2" >
  45. <option value="0">Select Block</option>
  46. </select>
  47. </td>
  48. </tr>
  49. </table>
  50.  
  51. <table align="center" border="0" cellpadding="1" cellspacing="0" width="743" >
  52. <tr>
  53. <td align="left" width="100%" >
  54. &nbsp;&nbsp;Cluster:
  55. <select class="style01" id=cluster name="cluster"  
  56. onchange=' getSchool("school");clearTable();' 
  57. style="width: 80mm; font-family: Georgia; border-style: double; padding: 0" size="1" tabindex="3">
  58. <option value="0">Select Cluster</option>
  59. </select>&nbsp;&nbsp;&nbsp; 
  60. School:
  61. <select class="style01" id=mySchool name="mySchool" onchange='clearTable();' 
  62. style="width: 80mm; font-family: Georgia; border-style: double" size="1" tabindex="4"> 
  63. <option value="0">Select School</option>
  64. </select>
  65. </td>
  66. </tr>
  67. </table>
  68. </table>
  69.  
  70. </form>
  71.  
  72. <form name="menulinks" action="login/loginmenu.do" method="get" target="_self">
  73.  
  74.  
  75. <table width=850px align="center" style="background-color: transparent;" border="0" cellpadding="0" cellspacing="0"> 
  76. <tr>
  77. <td>
  78. <!-- Tab Navigation Begins -->
  79. <center>  
  80.  
  81.  
  82.   <ul  id="navmenu" align="right" style="width: 1000px; " >
  83.  
  84.   <li><a  style="cursor: pointer " target="_top" title="Create Codes">Codes</a>
  85.         <ul>
  86.                  <li><a style="cursor: pointer " onClick="showTable(this.id)"    
  87.                        id="createcode">Create Codes</a></li>
  88.                 <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  89.                         id="viewcode">View Codes</a></li>
  90.            </ul>
  91.   </li>
  92.  
  93.   <li ><a  style="cursor: pointer " target="_top" title="Create or view/Edit 
  94.                                                                               Blocks">Blocks</a>
  95.           <ul>
  96.                  <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  97.                           id="createblock">Create</a></li>
  98.                  <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  99.                          id="viewblock">View/Edit</a></li>
  100.            </ul>
  101.   </li>
  102.  
  103.  
  104.  <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit 
  105.                                                                             Clusters">Clusters</a>
  106.           <ul>
  107.                  <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  108.                           id="createcluster">Create</a></li>
  109.                  <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  110.                           id="viewcluster">View/Edit</a></li>
  111.            </ul>
  112.   </li>
  113.  
  114.    <li ><a style="cursor: pointer " title="Create or view/Edit 
  115.                                                                            Schools">Schools</a>
  116.           <ul>
  117.                <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  118.                        id="createschool">Create</a></li>
  119.                <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  120.                        id="viewschool">View/Edit</a></li>
  121.            </ul>
  122.     </li>
  123.  
  124.      <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit 
  125.                                                                              Classes">Classes</a>
  126.              <ul>
  127.                     <li "><a style="cursor: pointer " onClick="showTable(this.id)" 
  128.                               id="createclass">Create</a></li>
  129.                     <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  130.                              id="viewclass">View/Edit</a></li> 
  131.             </ul>
  132.      </li>
  133.  
  134.  
  135.      <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit 
  136.                                                                            Sections">Sections</a>
  137.              <ul>
  138.                     <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  139.                             id="createsection">Create</a></li>
  140.                    <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  141.                            id="viewsection">View/Edit</a></li> 
  142.             </ul>
  143.      </li>
  144.  
  145.    <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit 
  146.                                                                            Teachers">Teachers</a>
  147.         <ul>
  148.                <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  149.                         id="createteacher">Create</a></li>
  150.                <li "><a style="cursor: pointer " onClick="showTable(this.id)" 
  151.                          id="viewteacher">View/Edit</a></li>
  152.            </ul>
  153.   </li>
  154.  
  155.   <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit 
  156.                                                                            Students">Students</a>
  157.           <ul>
  158.                <li ><a style="cursor: pointer " onClick="showTable(this.id)" 
  159.                         id="createstudent">Create</a></li>
  160.                <li ><a style="cursor: pointer " onClick="showTable(this.id);" 
  161.                          id="viewstudent">View/Edit</a></li>
  162.            </ul>
  163.   </li>
  164.  
  165.  
  166.     <li ><a  style="cursor: no-drop;  background-color: transparent; font 
  167.                                            color="#9933ff"" target="_top">Assessment</a>
  168.     </li> 
  169.  
  170. </ul>
  171.  
  172. </center>
  173. <!-- Tab Navigation Ends -->
  174.  
  175.  
  176. <script language='JavaScript'>
  177.  
  178.  
  179. function getDistricts()
  180. {
  181.  
  182. --------------------Java Code---------------------
  183.  
  184. }
  185. </script>
  186. </table> 
  187. </table>
  188. </form>
  189. </body>
  190. </html>
Dec 4 '07 #1
2 3495
drhowarddrfine
7,435 Expert 4TB
In modern browsers, you can use 'hover' on any element but IE is not a modern browser and fails when hover is applied to anything but <a>.
Dec 4 '07 #2
In modern browsers, you can use 'hover' on any element but IE is not a modern browser and fails when hover is applied to anything but <a>.

Ok. I did not know that.

Thanks a lot.
Dec 5 '07 #3

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

Similar topics

52
by: DJ WIce | last post by:
Hi all, I did make a script/css thing to replace the contextmenu on the website with a new one: http://www.djwice.com/contextmenu.html It works nice in MSIE, but on Netscape (and probable...
4
by: JesusFreak | last post by:
From: us_traveller@yahoo.com (JesusFreak) Newsgroups: microsoft.public.scripting.jscript Subject: toolbar script problem NNTP-Posting-Host: 192.92.126.136 Recently, I downloaded the following...
1
by: ajay | last post by:
I have following code for a slide menu but i twiked it to work for a single level menu. Open it in a Browser to get a clear picture. I have 2 Qs 1) How to make first entry as non-link. i.e i...
2
by: Brian Idzik | last post by:
I've successfully setup a xhtml 1.0 strict page with Mozilla & Netscape to display links in a toolbar into an internal <div id='content'> within the same document. The toolbar uses some...
22
by: Marek Mand | last post by:
How to create a functional *flexible* UL-menu list <div> <ul> <li><a href=""></li> <li><a href=""></li> <li><a href=""></li> </ul> </div> (working in IE, Mozilla1.6, Opera7 (or maybe even...
0
by: TAZ | last post by:
Here http://jacek.jackowski.net.pl/kontakt.php is a css menu and also a form below, when the menu expands it hides part fo forms inputs. It'll be allright but when you move cursor above the form...
26
by: Thomas Mlynarczyk | last post by:
Hi, Could some kind person using Mac or Linux (or others) please take a look at http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html and tell me if the page renders as it should (screenshot...
3
by: Bilal | last post by:
Hi, I've been looking all over the net for a way to increase the size of a drop down menu without any success. Does anyone perhaps have a way to display 11-15 items on a menu without having...
7
by: Chuck Hartman | last post by:
I have a Windows service that requests web pages from a site using an HttpWebRequest object. When I try to request a page from an ASP.NET 2 site, I get a WebException with message "The remote...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

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.