By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,698 Members | 1,262 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,698 IT Pros & Developers. It's quick & easy.

Horizontal Menu doesn't work in IE

P: 22
i m facing a new problem !....created a horizontal menu using javascript and css. it works well in firefoz but when i run it by IE it gers vertical :(.....any suggestion ....?
Feb 7 '07 #1
Share this Question
Share on Google+
6 Replies

acoder
Expert Mod 15k+
P: 16,027
Please post your code.
Feb 7 '07 #2

P: 22
Please post your code.
--CSS code--
Expand|Select|Wrap|Line Numbers
  1. .nav2
  2. {
  3. float:left; width:900px; border:none; background:rgb(220,220,220) url(../img/bg_head_bottom_nav.jpg) repeat-x; color:rgb(75,75,75); font-size:1.0em; font-size:130%;
  4. }
  5.  
  6. .nav2 ul{
  7. margin: 0;
  8. padding: 0;
  9. list-style-type: none;
  10. }
  11.  
  12.  
  13. /*Top level list items*/
  14. .nav2 ul li{
  15. float:left; position:relative; z-index:1000; border-right:solid 1px rgb(175,175,175);
  16. }
  17.  
  18. /*Top level menu link items style*/
  19. .nav2 ul li a{
  20. float:none; 
  21. width:auto;
  22. display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
  23.  
  24. /*1st sub level menu*/
  25. .nav2 ul li ul{
  26. left: 0;
  27. position: absolute;
  28. top: 1em; /* no need to change, as true value set by script */
  29. display: block;
  30. visibility: hidden;
  31. background:url(../img/bg_head_bottom_nav_hover.gif) top center;
  32. }
  33.  
  34. .nav2 ul li:hover ul li a {display:block; width:10em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 24px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
  35. .nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;}
  36.  
  37. .nav2 ul li a:hover ul {display:block; position:absolute;z-index: 998; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
  38. .nav2 ul li a:hover ul li a {display:block; width:10em; height:1px; line-height:1.3em; padding:0px 10px 0px 10px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 0px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
  39. .nav2 ul li a:hover .menuborder {border-bottom: solid 1px rgb(175,175,175);}
  40. .nav2 ul li a:hover ul li a ul {visibility:hidden; height:0px; width:0px; position:absolute; z-index: 997;}
  41. .nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/
  42.  
  43. /*Sub level menu list items (undo style from Top level List Items)*/
  44. .nav2 ul li ul li{
  45. display: list-item;
  46. float: none;
  47. }
  48.  
  49. /*All subsequent sub menu levels offset after 1st level sub menu */
  50. .nav2 ul li ul li ul{ 
  51. left: 159px; /* no need to change, as true value set by script */
  52. top: 0;
  53. }
  54.  
  55. /* Sub level menu links style */
  56. .nav2 ul li ul li a{
  57. display: block;
  58. width: 160px; /*width of sub menu levels*/
  59. color: navy;
  60. text-decoration: none;
  61. padding: 1px 5px;
  62. border: 1px solid #ccc;
  63. }
  64.  
  65. .nav2 ul li a:hover{
  66. background-color:rgb(210,210,210); text-decoration:none;
  67. }
  68.  
  69. /*Background image for top level menu list links */
  70. .nav2 .mainfoldericon{
  71. background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
  72. }
  73.  
  74. /*Background image for subsequent level menu list links */
  75. .nav2 .subfoldericon{
  76. background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
  77. }
  78.  
  79. * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
  80. padding-top: 1em;
  81. }
  82.  
  83. * html .nav2 ul li { float: left; height: 1%;}
  84. * html .nav2 ul li a { height: 1%;}
  85. * html .nav2 ul li ul li { float: left;}
  86.  

--Javascript code--
Expand|Select|Wrap|Line Numbers
  1.  var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
  2.  
  3. function buildsubmenus_horizontal(){
  4. for (var i=0; i<menuids.length; i++){
  5. var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
  6. for (var t=0; t<ultags.length; t++){
  7.     if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
  8.         ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
  9.         //ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
  10.     }
  11.     else{ //else if this is a sub level menu (ul)
  12.       ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
  13.     //ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
  14.     }
  15. ultags[t].parentNode.onmouseover=function(){
  16. this.getElementsByTagName("ul")[0].style.visibility="visible"
  17. }
  18. ultags[t].parentNode.onmouseout=function(){
  19. this.getElementsByTagName("ul")[0].style.visibility="hidden"
  20. }
  21. }
  22. }
  23. }
  24.  
  25.  
--html code---

[HTML] <div class="nav2">
<ul id="treemenu1">
<li><a href="index.html"">Home</a></li>

<li><a href="">Production</a>
<ul>
<li><a>Sampling</a>
<ul>
<li><a href="addsample.html">Add Sample</a></li>
<li><a href="addsample.html">View Sampling</a></li>
<li><a href="addsample.html">Edit Sampling</a></li>
<li><a href="addsample.html">Delete Sampling</a></li>

</ul>


</li>

<li><a>Production</a>

<ul>
<li><a href="addproduction.html">Add Production</a></li>
<li><a href="addproduction.html">View Production</a></li>
<li><a href="addproduction.html">Delete Production</a></li>
<li><a href="addproduction.html">Edit Production</a></li>
</ul>

</li>
<li><a href=>Report</a></li>


</ul>
</a>
</li>
<li><a href="#">Production Cost Management</a></li>
<li><a href="#">CRM</a></li>
<li><a href="#">Inventory</a></li>
<li><a href="#">User Management System</a></li>


</ul>
<br style="clear: left;" />
</div>[/HTML]
Code in tags - moderator
Feb 10 '07 #3

acoder
Expert Mod 15k+
P: 16,027
I assume you are using this script. IE6, as you will know is a buggy browser that doesn't support CSS properly. There are some hacks to solve this. Have you been through the comments on that page? You may have to ask on the CSS forum. Your Javascript seems ok.
Feb 10 '07 #4

P: 22
I assume you are using this script. IE6, as you will know is a buggy browser that doesn't support CSS properly. There are some hacks to solve this. Have you been through the comments on that page? You may have to ask on the CSS forum. Your Javascript seems ok.
your right acoder. thx for the reply.
Feb 11 '07 #5

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Did it solve your problem?
Feb 12 '07 #6

P: 22
thx acoder. ya i solved my problem by css. thx for asking :)
Feb 14 '07 #7

Post your reply

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