14 Replies Latest reply: Apr 9, 2013 5:03 AM by tkatcher RSS

    CSS Menu in Firefox not working

    tkatcher Community Member

      digitaldealershipsystem.com

      The Menu at the top works well in IE and Chrome, but in Firefox, when mousing over the links at the top, the pull down is under "home" instead of the appropriate area. They cannot be clicked which means it's useless for Firefox users.
      example.png


      Any assistance would be appreciated.

      Thank you.

       


       


        • 1. Re: CSS Menu in Firefox not working
          MurraySummers ACP/MVPs

          You have quite a few serious validation errors on this page. Fix those first before attempting to troubleshoot any layout issues.

           

          http://validator.w3.org

          • 2. Re: CSS Menu in Firefox not working
            tkatcher Community Member

            I've validated -- many of the 'errors' listed aren't actually there. They are so-called missing quotes or carrots and then when I look -- they are there.

             

            The validator lists a lot, but minimal is actually wrong.

             

            Plus in the HTML - everything is working - it's the navigation in CSS that is causing an issue only in Firefox.

            • 3. Re: CSS Menu in Firefox not working
              osgood_ MVP

              It doesnt have much to do with validation its the nav css that is wrong somehow

               

              If you add the styling directly to the page it positions correctly in Firefox BUT that will throw other browsers out.

               

              <ul style="position: absolute; left: 70px;">

                      <li class="subfirst"><a href="http://www.digitaldealershipsystem.com/overview.html">Feature List</a></li>

               

               

              Unfortunately I'm not familar with the css that is written, so apart from identifying the problem I can't be of much help.

               

              .topmenu class needs to be position: relative; as far as I can see so the ul within it can be positioned absolutely. If I set that it doesnt seem to observer the position of relative beacuse it still throws the ul nested within it right over to the start of the menu.

              • 4. Re: CSS Menu in Firefox not working
                MurraySummers ACP/MVPs

                Validator doesn't make mistakes like that.

                 

                When I validate digitaldealerships.com, I get 60 errors containing several things like this -

                 

                <!-- End css3menu.com BODY section -->

                <td width="73" align="right" valign="top" bgcolor="#333333"><a id="login" onClick="openLoginApp('login', 'http://galaxy.signage.me/WebService/', airApplicationArguments)"><image src="http://www.digitaldealershipsystem.com/images/nav3/login.png" />

                 

                (no such thing as <image>)

                 

                or many like this -

                 

                <a href="gallery.html"/>

                 

                (that's not a valid opening anchor tag)

                 

                Or this -

                 

                <p><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

                 

                (can't put a table into a paragraph tag)

                 

                There's lots of work to do there.

                • 5. Re: CSS Menu in Firefox not working
                  tkatcher Community Member

                  Thank you.

                   

                  http://www.digitaldealershipsystem.com/images/nav3/login.png

                   

                  This is a valid image. Check it out.

                   

                  out of the 60 listed -- MOST are not valid or have no impact. As below, the link still works -- so how invalid is it?

                   

                  I'm sorry, I don't see how

                  <a href="gallery.html"/>

                   

                  is not a valid tag. but I can look into that.

                   

                  If <p><table... isn't valid, then why would dreamweaver create exactly that?

                   

                  I understand that all of these can impact other aspects, but since it doesn't effect IE or Chrome, then I am trying to find something that is firefox specific.

                   


                   


                  • 6. Re: CSS Menu in Firefox not working
                    MurraySummers ACP/MVPs

                    It's your use of an invalid <image> tag that's in question in these several instances.  That's not a valid tag (<image>) - it's <img>. Also <a href="whatever.html" /> is not a properly formed opening anchor tag. It should be <a href="whatever.html">. Those kinds of things can be responsible for many browser problems.

                     

                    By looking for something that is FF-specific you will be missing the boat on getting this fixed. It makes no sense to troubleshoot a layout issue on a page that you know contains invalid code.

                    • 7. Re: CSS Menu in Firefox not working
                      osgood_ MVP

                      MurraySummers wrote:

                       

                      It's your use of an invalid <image> tag that's in question in these several instances.  That's not a valid tag (<image>) - it's <img>. Also <a href="whatever.html" /> is not a properly formed opening anchor tag. It should be <a href="whatever.html">. Those kinds of things can be responsible for many browser problems.

                       

                      By looking for something that is FF-specific you will be missing the boat on getting this fixed. It makes no sense to troubleshoot a layout issue on a page that you know contains invalid code.

                       

                      I hear what you are saying Murray being a validation geek, I respect that, but this (I think) has nothing to do with validation. I striped out all of the page completely and just left the nav stuff. 

                       

                      If that is valid and I didnt have time to check its a css issue

                      • 8. Re: CSS Menu in Firefox not working
                        tkatcher Community Member

                        http://digitaldealershipsystem.com/index-navtest.html

                         

                        That is just the nav

                         

                        So, while I respect (as osgood) does that there are validation issues -- removing all the content from the page and then just focusing on the nav -- shows that the nav does not work correctly in firefox.

                         

                        Ideas?

                        • 9. Re: CSS Menu in Firefox not working
                          osgood_ MVP

                          I'm not sure that anyone really knows the answer without unpicking the css that positions the menu. Not sure where you got the css code from but did they have any examples which worked in Firefox?

                          • 10. Re: CSS Menu in Firefox not working
                            tkatcher Community Member

                            css3menu.com

                             

                            States it supports all browsers.

                            • 11. Re: CSS Menu in Firefox not working
                              Dave.Lu

                              Why don't you give a try to AllWebMenus? (likno.com). Their menu builder handles problems like that (cross-browser, cross-platform,...) and they have a Dreamweaver Extension.

                              • 12. Re: CSS Menu in Firefox not working
                                MurraySummers ACP/MVPs

                                I would never dream of using an AllWebMenu on anything. The implementations I have seen are just horrible. Are the links still embedded in javascript so that they cannot be read by search engines?

                                • 13. Re: CSS Menu in Firefox not working
                                  Dave.Lu Community Member

                                  This used to be the case many years ago, it seems that they now have multiple options on how to populate your menu: they now have a pure-CSS menu version as well as a UL/LI population method for their JavaScript menu, so SEO is definitely not an issue.

                                  • 14. Re: CSS Menu in Firefox not working
                                    tkatcher Community Member

                                    I went back to css3menu and did some checking. Their code is much cleaner now -- and worked with firefox. It most likely was a version issue whereas the code I used originally to create the menus are now broken in Firefox.

                                     

                                    FYI - the free version provides enough controls that you can change colors and multiple menus -- with some editing. The pay version has more templates, but that wasn't needed for my application.

                                     

                                    Thank you for your feedback and assistance.