CSS Drive forums | CSS drop down menu showing right in IE but not in Firefox

CSS drop down menu showing right in IE but not in Firefox

Posted: 23 February 2009 06:58 AM

[ Ignore ]

Newbie

Total Posts: 2

Joined 2009-02-23

I have programmed a drop down menu in css and it works fine in Internet Explorer but when I check it with firefox it is a mess. I have tried everything to get it right and it doesnt work out. The site is http://www.dmxledlights.com/ and the css is the following:

#mainNav {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 711px;
    float: right;
    height: 31px;
}
/* NAV MENU STYLES */
ul#nav1 {
    margin: 0;
    list-style: none;
    height: 31px;
    padding-top: 1px;
    padding-right: 0;
    padding-bottom: 1px;
    padding-left: 0;
    float: left;
}
ul#nav1 li {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    float: left;
}
ul#nav1 li a:link, ul#nav1 li a:visited {
    display: block;
    line-height: 31px;
    text-decoration: none;
    font-family: Arial;
    font-size: 12px;
    background-image: url(../images/boton_negro.jpg);
    height: 31px;
    width: 129px;
    text-align: center;
    color: #fff;
}
ul#nav1 li.first a:link, ul#nav1 li.first a:visited {
    background-image: url(../images/boton_negro_i.jpg);
    background-repeat: no-repeat;
    height: 31px;
    width: 80px;
}
ul#nav1 li.activeFirst a:link, ul#nav1 li.activeFirst a:visited {
    background-image: url(../images/boton_azul_i.jpg);
    background-repeat: no-repeat;
    height: 31px;
    width: 80px;
}
ul#nav1 li.active a:link, ul#nav1 li.active a:visited {
    background-image: url(../images/boton_azul.jpg);
    background-repeat: no-repeat;
    height: 31px;
    width: 129px;
}
ul#nav1 li.last a:link, ul#nav1 li.last a:visited {
    background-image: url(../images/boton_negro_f.jpg);
    background-repeat: no-repeat;
    height: 31px;
    width: 115px;
}
ul#nav1 li:hover a, ul#nav1 li a:hover, ul#nav1 li a:active {
    background: url(../images/boton_azul.jpg) no-repeat top right;
    padding: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    height: 31px;
    width: 129px;
}
ul#nav1 li.activeFirst:hover a, ul#nav1 li.activeFirst a:hover, ul#nav1 li.activeFirst a:active {
    background: url(../images/boton_azul_i.jpg) no-repeat top right;
    padding: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    height: 31px;
    width: 80px;
}
ul#nav1 li.active:hover a, ul#nav1 li.active a:hover, ul#nav1 li.active a:active {
    background: url(../images/boton_azul.jpg) no-repeat top right;
    padding: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    height: 31px;
    width: 129px;
}
ul#nav1 li.last:hover a, ul#nav1 li.last a:hover, ul#nav1 li.last a:active {
    background: url(../images/boton_azul_f.jpg) no-repeat top right;
    padding: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    height: 31px;
    width: 115px;
}
/* NAV SUBMENU STYLES */
ul#nav1 li ul.nav2 {
    margin: 0;
    list-style: none;
    display: none;
    width: 200px;
    position: absolute;
    top: 31px;
    left: 1px;
    padding-top: 1px;
    padding-right: 1px;
    padding-bottom: 0;
    padding-left: 1px;
}
ul#nav1 li:hover ul.nav2 {
    display: block;
}
ul#nav1 li ul.nav2 li {
    width: 200px;
    clear: left;
    width: 200px;
}
ul#nav1 li ul.nav2 li a:link, ul#nav1 li ul.nav2 li a:visited {
    clear: left;
    width: 200px;
    position: relative;
    z-index: 1000;
    background-image: url(../images/rolover_back.png);
    font-family: Arial;
    font-size: 12px;
    color: #000;
    height: 29px;
    text-align: left;
    padding: 0;
    text-indent: 10px;
    background-repeat: repeat-x;
}
ul#nav1 li ul.nav2 li:hover a, ul#nav1 li ul.nav2 li a:active, ul#nav1 li ul.nav2 li a:hover {
    clear: left;
    padding: 0;
    width: 200px;
    position: relative;
    z-index: 1000;
    color: #fff;
} 

The HTML is the following:

<div id="mainNav">
      <ul id="nav1">
        <li class="activeFirst"><a href="#" title="Home"><strong>Home</strong></a></li>
        <li><a href="" title="About Us"><strong>About Us</strong></a></li>
        <li><a href="#" title="Outdoor LED Lighting"><strong>Outdoor LED Lighting</strong></a></li>
        <ul class="nav2">
          <li><a href="#">SP90 LED Street Lights</a></li>
          <li><a href="#">LU1 LED Street Lights</a></li>
          <li><a href="#">LU2 LED Street Lights</a></li>
          <li><a href="#">LU4 LED Street Lights</a></li>
          <li><a href="#">LU6 LED Street Lights</a></li>
          <li><a href="#">LU8 LED Street Lights</a></li>
          <li><a href="#">SD2 LED Tunnel Lights</a></li>
          <li><a href="#">Solar LED Street Lights</a></li>
          <li><a href="#">LED Traffic Lights</a></li>
          <li><a href="#">LED Wall Washers</a></li>
        </ul>
        <li><a href="#" title="Indoor LED Lighting"><strong>Indoor LED Lighting</strong></a></li>
        <ul class="nav2">
          <li><a href="#">MR16 LED Light Bulbs</a></li>
          <li><a href="#">SP50 LED Light Bulbs</a></li>
          <li><a href="#">SP70 LED Light Bulbs</a></li>
          <li><a href="#">SP80 LED Light Bulbs</a></li>
          <li><a href="#">SP80B LED Light Bulbs</a></li>
          <li><a href="#">T5 Retrofit LED Light Tubes</a></li>
          <li><a href="#">T8 Retrofit LED Light Tubes</a></li>
        </ul>
        <li><a href="#" title="Fluorescent Lighting"><strong>Fluorescent Lighting</strong></a></li>
        <ul class="nav2">
          <li><a href="#">Fluorescent Light Bulbs</a></li>
          <li><a href="#">Compact Fluorescent Light Bulbs</a></li>
        </ul>
        <li class="last"><a href="#" title="Contact Us"><strong>Contact Us</strong></a></li>
      </ul>
    </div> 

Can someone help me out with finding the mistake?? I am getting nuts of not getting it right…

Thank youv ery much in advance…

greetings,

Richard

Profile

POSERA

Posted: 23 February 2009 11:28 PM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 2

Joined 2009-02-23

I just found out what is the mistake for not showing right in firefox. When you start a second level in the menu you should not close the <li> yet to which you are going to attach the drop down. this means that the html has to be like this:

<div id="mainNav">
  <ul id="nav1">
    <li class="activeFirst"><a href="#" title="Home"><strong>Home</strong></a></li>
    <li><a href="" title="About Us"><strong>About Us</strong></a></li>
    <li><a href="#" title="Outdoor LED Lighting"><strong>Outdoor LED Lighting</strong></a> /** Here you dont close the </li> yet **/
      <ul class="nav2">
        <li><a href="#">SP90 LED Street Lights</a></li>
        <li><a href="#">LU1 LED Street Lights</a></li>
        <li><a href="#">LU2 LED Street Lights</a></li>
        <li><a href="#">LU4 LED Street Lights</a></li>
        <li><a href="#">LU6 LED Street Lights</a></li>
        <li><a href="#">LU8 LED Street Lights</a></li>
        <li><a href="#">SD2 LED Tunnel Lights</a></li>
        <li><a href="#">Solar LED Street Lights</a></li>
        <li><a href="#">LED Traffic Lights</a></li>
        <li><a href="#">LED Wall Washers</a></li>
      </ul>
    </li> /** but here you do have to close it **/
    <li><a href="#" title="Indoor LED Lighting"><strong>Indoor LED Lighting</strong></a> /** Here you dont close the </li> yet **/
      <ul class="nav2">
        <li><a href="#">MR16 LED Light Bulbs</a></li>
        <li><a href="#">SP50 LED Light Bulbs</a></li>
        <li><a href="#">SP70 LED Light Bulbs</a></li>
        <li><a href="#">SP80 LED Light Bulbs</a></li>
        <li><a href="#">SP80B LED Light Bulbs</a></li>
        <li><a href="#">T5 Retrofit LED Light Tubes</a></li>
        <li><a href="#">T8 Retrofit LED Light Tubes</a></li>
      </ul>
    </li> /** but here you do have to close it **/
    <li><a href="#" title="Fluorescent Lighting"><strong>Fluorescent Lighting</strong></a>  /** Here you dont close the </li> yet **/
      <ul class="nav2">
        <li><a href="#">Fluorescent Light Bulbs</a></li>
        <li><a href="#">Compact Fluorescent Light Bulbs</a></li>
      </ul>
    </li> /** but here you do have to close it **/
    <li class="last"><a href="#" title="Contact Us"><strong>Contact Us</strong></a></li>
  </ul>
</div> 

So it was actually kind of easy…

Greetings,

Richard

Profile

amonialogin

Posted: 03 August 2010 09:28 AM

[ Ignore ] [ # 2 ]

Newbie

Total Posts: 3

Joined 2010-08-03

1. First make sure that the “Element” value is selected at the AllWebMenus property before the menu compilation (fail to do so will make your menu appear at the “Window-related” offsets for some milliseconds and then jump to the element position).

clip0144

2. Edit your HTML page

3. Choose the element where you want your menu to appear

4. Add the following parameter on the element’s tag:

id=“awmAnchor-menu”

where menu should be the actual name of your compiled menu (without the .js extension). If your compiled menu is called “mymenu.js” the following code should be used instead:

id=“awmAnchor-mymenu”

This is all you have do. When a user browses your page, the AllWebMenus script detects the element with the id parameter and shows the menu at the element’s location. If the script does not detect the id, the menu will not appear.

Examples:

A menu (compiled as “menu.js”) is attached to a table using the following code:

clip0149

The same technique applies if the chosen element is different, such as:

TD:

Link:

Menu attached to this link.

Image:

products1.gif

DIV:

SPAN (the most generic element):

Note that prior to AllWebMenus v4.1 the following code was used for positioning:

It is ok to continue using the above code on your pages as it already contains the required id parameter for positioning.

In case you were using OFFSETS on version 4.0, please bear in mind that these OFFSETS are now passed into the menu.js file instead of the above positioning code. Therefore, in order for your OFFSETS not to be *double-counted*, please make sure that you remove the following code from your html pages:

clip0148

We strongly recommend that you view the related “Live Example” of this property, as it shows most possible combinations on actual HTML pages.

Note: Main Menu is floating - reserve space on your layout:

Remember that a DHTML menu is always floating. It appears over the page contents, not inside them. It does not push other elements away; it just covers them. Therefore, for the Main Menu not to cover other page elements you should arrange for sufficient room on your layout so that the Main Menu appears there. For example, for an horizontal menu of about 440 pixels wide and 44 pixels tall, you could use the following HTML code:

</td>

</tr> </table>

full version

Profile

romiojai

Posted: 27 November 2010 04:13 PM

[ Ignore ] [ # 3 ]

Newbie

Total Posts: 3

Joined 2010-11-27

POSERA - 23 February 2009 11:28 PM
I just found out what is the mistake for not showing right in firefox. When you start a second level in the menu you should not close the <li> yet to which you are going to attach the drop down. this means that the html has to be like this:

<div id="mainNav"> <ul id="nav1"> <li class="activeFirst"><a href="#" title="Home"><strong>Home</strong></a></li> <li><a href="" title="About Us"><strong>About Us</strong></a></li> <li><a href="#" title="Outdoor LED Lighting"><strong>Outdoor LED Lighting</strong></a> /** Here you dont close the </li> yet **/ <ul class="nav2"> <li><a href="#">SP90 LED Street Lights</a></li> <li><a href="#">LU1 LED Street Lights</a></li> <li><a href="#">LU2 LED Street Lights</a></li> <li><a href="#">LU4 LED Street Lights</a></li> <li><a href="#">LU6 LED Street Lights</a></li> <li><a href="#">LU8 LED Street Lights</a></li> <li><a href="#">SD2 LED Tunnel Lights</a></li> <li><a href="#">Solar LED Street Lights</a></li> <li><a href="#">LED Traffic Lights</a></li> <li><a href="#">LED Wall Washers</a></li> </ul> </li> /** but here you do have to close it **/ <li><a href="#" title="Indoor LED Lighting"><strong>Indoor LED Lighting</strong></a> /** Here you dont close the </li> yet **/ <ul class="nav2"> <li><a href="#">MR16 LED Light Bulbs</a></li> <li><a href="#">SP50 LED Light Bulbs</a></li> <li><a href="#">SP70 LED Light Bulbs</a></li> <li><a href="#">SP80 LED Light Bulbs</a></li> <li><a href="#">SP80B LED Light Bulbs</a></li> <li><a href="#">T5 Retrofit LED Light Tubes</a></li> <li><a href="#">T8 Retrofit LED Light Tubes</a></li> </ul> </li> /** but here you do have to close it **/ <li><a href="#" title="Fluorescent Lighting"><strong>Fluorescent Lighting</strong></a> /** Here you dont close the </li> yet **/ <ul class="nav2"> <li><a href="#">Fluorescent Light Bulbs</a></li> <li><a href="#">Compact Fluorescent Light Bulbs</a></li> </ul> </li> /** but here you do have to close it **/ <li class="last"><a href="#" title="Contact Us"><strong>Contact Us</strong></a></li> </ul> </div>

So it was actually kind of easy…

Greetings,

Richard

thank you. Work well now.

diet

Profile

beowulf

Posted: 21 December 2010 05:05 PM

[ Ignore ] [ # 4 ]

Jr. Member

Total Posts: 42

Joined 2010-12-14

SPAN (the most generic element):

Note that prior to AllWebMenus v4.1 the following code was used for positioning:

Just tweak this for your site.

Profile

egipt

Posted: 29 December 2010 04:07 PM

[ Ignore ] [ # 5 ]

Newbie

Total Posts: 2

Joined 2010-12-29

this was very useful solution:) i have similar problem that my css differs in IE and FF and now I mage to make it works properly under FF :)

___________________________
egipt wakacje

Profile

beggar

Posted: 20 February 2011 10:12 PM

[ Ignore ] [ # 6 ]

Newbie

Total Posts: 23

Joined 2011-01-06

As you’ve probably seen by now, building a Web page that displays well on all browsers isn’t easy.

Profile

blackballonline

Posted: 24 February 2011 10:57 PM

[ Ignore ] [ # 7 ]

Newbie

Total Posts: 3

Joined 2011-02-24

IE is infamous - another technique is for browser compatibility problems is conditional css [If IE] or [If IE5] for example. The code only renders on the conditional statement. Hopefully IE9 will be standards compliant but there are still so many with older browser versions that refuse to change.

Profile

annamartha

Posted: 22 April 2011 12:16 PM

[ Ignore ] [ # 8 ]

Newbie

Total Posts: 4

Joined 2010-07-31

Hi Richard,
Thanks a lot for sharing this valuable and excellent article with us. it really works great in Internet Explorer and Firefox. I am appreciating your attempt to create it! Looking forward to another great article.
Good luck.
————————————————————————————————————————————————-
Nootropics | Where to buy Nootropics in Australia

Profile

annamartha

Posted: 22 April 2011 12:21 PM

[ Ignore ] [ # 9 ]

Newbie

Total Posts: 4

Joined 2010-07-31

Language Exchange My Language Exchange

Profile

sarasmile

Posted: 25 April 2011 07:06 PM

[ Ignore ] [ # 10 ]

Newbie

Total Posts: 25

Joined 2010-09-15

blackballonline - 24 February 2011 10:57 PM
IE is infamous - another technique is for browser compatibility problems is conditional css [If IE] or [If IE5] for example. The code only renders on the conditional statement. Hopefully IE9 will be standards compliant but there are still so many with older browser versions that refuse to change.

It’s surprising how many people are still using IE when other browsers are so much better. I’m personally loving Firefox 4.0!

.
________________
modern furniture

Profile

miguel

Posted: 06 June 2011 07:54 PM

[ Ignore ] [ # 11 ]

Sr. Member

Total Posts: 139

Joined 2010-04-23

Yeah, Firefox is better but IE is the default browser on Windows.
_____________________________
Running - Running Log
5k - 10k - Half Marathon - Marathon

Profile

‹‹ Do I need a CSS hack? Another IE problem.... IE 6 div problems ››