471,599 Members | 1,352 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 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 3392
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

Post your reply

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

Similar topics

52 posts views Thread by DJ WIce | last post: by
4 posts views Thread by JesusFreak | last post: by
22 posts views Thread by Marek Mand | last post: by
26 posts views Thread by Thomas Mlynarczyk | last post: by
3 posts views Thread by Bilal | last post: by
7 posts views Thread by Chuck Hartman | last post: by

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.