473,226 Members | 1,346 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,226 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 3491
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...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

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.