Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

Menu Works in Mozilla but doesn't work in IE

Newbie
  
Join Date: Dec 2007
Posts: 2
#1: Dec 4 '07
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>

drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,572
#2: Dec 4 '07

re: Menu Works in Mozilla but doesn't work in IE

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>.
Newbie
  
Join Date: Dec 2007
Posts: 2
#3: Dec 5 '07

re: Menu Works in Mozilla but doesn't work in IE

Quote:

Originally Posted by drhowarddrfine

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.
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,471 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved