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

Firefox issue - css dropdown menu

P: 27
I have created this horizontal dropdown menu in css which is working fine in IE6+ but isn't firefox, and I have no idea why. here is the code:

HTML:

[HTML]<body id="our-travels" class="home">

<div id="header">

<h1>Header</h1>

</div>

<div id="content_holder">

<div id="nav_main">

<ul class="level1">
<li class="submenu"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Canada</a>
<ul class="level2">
<li class="canada"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Canada</a> </li>
<li class="canada"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Canada</a> </li>
<li class="canada"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Canada</a> </li>
<li class="canada"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Canada</a> </li>
<li class="canada"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Canada</a> </li>
</ul>
</li>
<li class="submenu"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">America</a>
<ul class="level2">
<li class="america"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">America</a> </li>
<li class="america"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">America</a> </li>
<li class="america"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">America</a> </li>
<li class="america"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">America</a> </li>
</ul>
</li>
<li class="submenu"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Peru</a>
<ul class="level2">
<li class="peru"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Peru</a> </li>
<li class="peru"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Peru</a> </li>
<li class="peru"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Peru</a> </li>
<li class="peru"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Peru</a> </li>
</ul>
</li>
<li class="submenu"><a href="#" onmouseover="lite(this)" onmouseout="lite(this)"> Thailand</a>
<ul class="level2">
<li class="thailand"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Thailand</a> </li>
<li class="thailand"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Thailand</a> </li>
<li class="thailand"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Thailand</a> </li>
<li class="thailand"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Thailand</a> </li>
<li class="thailand"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Thailand</a> </li>
</ul>
</li>
<li class="submenu"><a href="#" onmouseover="lite(this)" onmouseout="lite(this)"> Australia</a>
<ul class="level2">
<li class="australia"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Australia</a> </li>
<li class="australia"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Australia</a> </li>
<li class="australia"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Australia</a> </li>
<li class="australia"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Australia</a> </li>
<li class="australia"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Australia</a> </li>
</ul>
</li>
<li class="submenu"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">ROTW</a>
<ul class="level2">
<li class="world"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">ROTW</a> </li>
<li class="world"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">ROTW</a> </li>
<li class="world"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">ROTW</a> </li>
<li class="world"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">ROTW</a> </li>
<li class="world"> <a href="#" onmouseover="lite(this)" onmouseout="lite(this)">ROTW</a> </li>
</ul>
</li>
</ul>

</div>

<div id="content" class="clear_children">

<div id="content_main" class="pc cc_tallest">

<h2>Stuff 1</h2>

</div>

<div id="content_sub" class="sc">

<h3>Stuff2</h3>

</div>

</div>

</div>

<div id="footer">

<h5>Footer</h5>

</div>
<script type="text/javascript" src="si-clear-children.js"></script>
<body>
</body>
[/HTML]
CSS:

Expand|Select|Wrap|Line Numbers
  1. /* CSS Document */
  2. /* Normalizes margin, padding */
  3. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td 
  4. { margin : 0; padding : 0; }
  5.  
  6. /* Normalizes font-size for headers */
  7. h1,h2,h3,h4,h5,h6 { font-size : 100%; }
  8.  
  9. /* Removes list-style from lists */
  10. ol,ul { list-style : none; }
  11.  
  12. /* Normalizes font-style and font-weight to normal */
  13. address, caption, cite, code, dfn, em, strong, th, var
  14. { font-style : normal; font-weight : normal; }
  15.  
  16. /* Removes list-style from lists */
  17. table { border-collapse : collapse; border-spacing : 0; }
  18.  
  19. /* Removes border from fieldset and img */
  20. fieldset,img { border : 0; }
  21.  
  22. /* Left-aligns text in caption and th */
  23. caption,th { text-align : left; }
  24.  
  25. /* Removes quotation marks from q */
  26. q:before, q:after { content :''; }
  27.  
  28.  
  29. /* layout.css */
  30.  
  31. html     { text-align : center;  }
  32.  
  33. body { 
  34. position : relative; 
  35. width : 770px; 
  36. margin : 0 auto; 
  37. text-align : left; 
  38. behavior: url(csshover.htc);
  39. }
  40.  
  41. div#content_holder { 
  42. position : relative; 
  43. width : 100%;
  44. /*border: 1px solid #000000;*/ 
  45. }
  46.  
  47. div#content { 
  48. position : relative; 
  49. width : 100%;
  50. }
  51.  
  52.  
  53. div#content_main {
  54. left : 10%; 
  55. width : 40%; 
  56. padding : 1em 0; 
  57. /*border: 1px solid #000000;*/
  58. }
  59.  
  60. div#content_sub { 
  61. left : 50%;  
  62. width : 40%; 
  63. padding : 1em 0; 
  64. /*border: 1px solid #000000;*/
  65. }
  66.  
  67. div#nav_main {
  68. left : 10%;  
  69. width : 80%; 
  70. vertical-align:middle;
  71. position:relative;
  72. z-index : 10;
  73. /*border: 1px solid #000000;*/
  74. }
  75.  
  76. div#header {
  77. height:50px;
  78. /*border: 1px solid #000000;*/
  79. }
  80.  
  81. div#footer {
  82. height: 50px;
  83. /*border: 1px solid #000000;*/
  84. }
  85.  
  86. /* =si_clear_children */
  87. .pc,.sc { position : absolute; top: 0; left: 0; }
  88. .clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
  89. .cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
  90.  
  91.  
  92. div#nav_main a {
  93. display: block;
  94. background: #ffffff;
  95. text-decoration: none;
  96. filter:blendTrans(duration=0.5);
  97. }
  98.  
  99. div#nav_main a:hover {
  100. display: block;
  101. background: #dcdcdc;
  102. text-decoration: none;
  103. filter:blendTrans(duration=0.5);
  104. }
  105.  
  106. div#nav_main ul {
  107.   margin: 0; padding: 0;
  108.   /*border: 1px solid #000000;*/
  109. }
  110.  
  111. div#nav_main li {
  112.   position: relative;
  113.   float: left;
  114.   width: 6.25em;
  115.   background-color:#FFFFFF;
  116.   /*border: 1px solid #000000;*/
  117. }
  118.  
  119. div#nav_main li:hover {
  120.   color: #000000;
  121.   background-color:#CCCCCC;
  122.   cursor:pointer;
  123. z-index:100;
  124. }
  125.  
  126. div#nav_main li.submenu {
  127.  
  128. }
  129.  
  130. div#nav_main li.submenu:hover {;
  131.   /*border: 1px solid #000000;*/
  132.   background-color:#CCCCCC;
  133. }
  134.  
  135. div#nav_main li a {
  136.   display: block;
  137.   width: 6.25em;
  138. }
  139.  
  140. div#ul a {
  141.   width: auto;
  142. }
  143.  
  144. div#nav_main ul ul {
  145.   position: absolute;
  146.   width: 6.25em;
  147.   display: none;
  148.   background-color:#FFFFFF;
  149. }
  150.  
  151. div#nav_main ul ul li {
  152.   /*border: 1px solid #000000;*/
  153. }
  154.  
  155. div#nav_main li.submenu li.submenu {
  156.  
  157. }
  158.  
  159. div#nav_main li.submenu li.submenu:hover {
  160.   background-color: #000000;
  161. }
  162.  
  163. div#nav_main ul.level1 li.submenu:hover ul.level2, {
  164.   display: block;
  165. }
Apr 5 '07 #1
Share this Question
Share on Google+
6 Replies


Expert 100+
P: 1,892
This is a Javascript problem post your Javascript and if we can't see the problem I'll move your thread to the Javascript forum.
Apr 5 '07 #2

P: 27
Here are the 2 scripts used:

1 - si-clear-children.js

Expand|Select|Wrap|Line Numbers
  1. /*--------------------------------------------------------------------------------
  2.  SI.ClearChildren v1.0
  3.  
  4.  Instructions for use:
  5.  
  6.  0. Include the following rules in your CSS (IE Win 5 requires `clear_children` to 
  7.     be display: inline; you can use the * html hack--just be sure to hide from IE 
  8.     Mac):
  9.  
  10.      .clear_children,.cc_tallest { position: relative; }
  11.     .cc_tallest:after { content: ''; }
  12.  
  13.  1. Layout your elements using absolute positioning relative to a container with a 
  14.     class of `clear_children` which contains only the absolutely positioned 
  15.     elements (no other inline elements).
  16.  
  17.  2. This causes the containing element to collapse.
  18.  
  19.  3. Decide which contained element will be the deepest on the most occasions and 
  20.     assign a class of `cc_tallest`. This will cause the containing element to 
  21.     expand to the height of this element.
  22.  
  23.  4. Include this file.
  24.  
  25.  ---------------------------------------------------------------------------------*/
  26. if (!SI) { var SI = new Object(); };
  27. SI.ClearChildren =
  28. {
  29.     control            : null,
  30.     watchInterval    : 50,
  31.     height            : 0,
  32.     initialize        : function()
  33.     {
  34.         // IE Mac chokes on this (width and height assignments in particular). Go fish.
  35.         if (document.createElement && !(document.all && !window.print))
  36.         {
  37.             var c = document.createElement('div'), s = c.style;
  38.             s.position        = 'fixed';
  39.             s.top            = '0';
  40.             s.visibility    = 'hidden';
  41.             s.width            = '1.em';
  42.             s.height        = '1.em';
  43.             this.control = document.body.appendChild(c);
  44.             this.height = 0;
  45.             window.setInterval('SI.ClearChildren.monitor()', this.watchInterval);
  46.         };
  47.         this.clear();
  48.     },
  49.  
  50.     monitor    : function()
  51.     {
  52.         var o = this.height;
  53.         this.height = this.control.offsetHeight;
  54.         if (o != this.height) { this.clear(); };
  55.     },
  56.  
  57.     clear : function()
  58.     {
  59.         if (!document.getElementsByTagName && !document.all) { return; }
  60.  
  61.         var elems = (document.all) ? document.all : document.getElementsByTagName('*');
  62.         for (var i = elems.length-1; i >= 0; i--)
  63.         {
  64.             var elem = elems[i];
  65.             if (!elem.className.match(/\bclear_children\b/)) { continue; };
  66.             var container = elem;
  67.             var tallest;
  68.             var maxHeight = 0;
  69.             for (var j = 0; j < container.childNodes.length; j++)
  70.             {
  71.                 var contained = container.childNodes[j];
  72.                 if (contained.nodeType == 1)
  73.                 {
  74.                     if (contained.offsetHeight > maxHeight)
  75.                     {
  76.                         maxHeight    = contained.offsetHeight;
  77.                         tallest        = contained;
  78.                     };
  79.                     contained.className = contained.className.replace(/\bcc_tallest\b/, '');
  80.                 };
  81.             };
  82.             // Add to the front of the existing classes to appease IE Mac. Save me Jeebus. 
  83.             tallest.className = 'cc_tallest' + ((tallest.className == '') ? '' : ' ' + tallest.className);
  84.         };
  85.     }
  86. };
  87.  
  88. // Just do it.
  89. SI.ClearChildren.initialize();
  90.  
2 - transition-effect.js

Expand|Select|Wrap|Line Numbers
  1. function lite(obj) {
  2. if(document.all&&!window.opera) {
  3. obj.filters.blendTrans.apply(); 
  4. obj.filters.blendTrans.play(); 
  5. }
Please post code using code tags - moderator
Apr 5 '07 #3

P: 27
So any ideas, anyone, anyone?
Apr 10 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
Well, I just now saw that this is a js problem so I'll move it to the js board.
Apr 10 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
Didn't really look into this before I moved it. The CSS does not validate and I don't know about the html so there may be issues there. If your code works in IE but not Firefox then the code is the problem. Always get your code working in a modern browser first; then adjust for IEs quirks and bugs.
Apr 10 '07 #6

acoder
Expert Mod 15k+
P: 16,027
You also have an extra opening body tag.
Apr 11 '07 #7

Post your reply

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