10 Replies Latest reply on Mar 16, 2013 11:41 AM by osgood_

    List is disappearing

    matthew stuart Level 2

      Hi, I am in the process of trying to create a horizontal navigation bar, and I am using an unordered list. The code I am using is OK until I try to apply display:inline to the ul or the li. As soon as I do this, the whole thing disappears. If I try to add display:inline to one individual css rule like I've done for #navhome, it appears. If I then apply it to all rules, then it all disappears again!

       

      Could somebody point out why, please?

       

      Thanks.

       

      <style type="text/css">

      ul {

                margin: 0px;

                padding: 0px;

                min-height:88px;

           /*display: inline;  This doesn't work  */

      }

      ul li {

                list-style-type: none;

                min-height:88px;

           /*display: inline;  This doesn't work  */

      }

      a #navhome {

                background-image: url(images/btn-nav-home.png);

                background-repeat: no-repeat;

                height: 88px;

                width: 66px;

                list-style-type: none;

                display: inline; /* this works until I add it to another rule - see below */

      }

      a:hover #navhome {

                background-image: url(images/btn-nav-home1.png);

      }

      a #navabout {

                background-image: url(images/btn-nav-about.png);

                background-repeat: no-repeat;

                height: 88px;

                width: 66px;

                list-style-type: none;

           /*display: inline;  This makes #navhome disappear!  */

      }

      a:hover #navabout {

                background-image: url(images/btn-nav-about1.png);

      }

      </style>

       

       

      <ul>

        <a href="#"><li id="navhome"></li></a>

        <a href="#"><li id="navabout"></li></a>

        <a href="#"><li id="navequipment"></li></a>

      </ul>

        • 1. Re: List is disappearing
          Jon Fritz II Adobe Community Professional & MVP

          This is invalid code and "could" be making DW go nutty...

           

          <ul>

            <a href="#"><li id="navhome"></li></a>

            <a href="#"><li id="navabout"></li></a>

            <a href="#"><li id="navequipment"></li></a>

          </ul>

           

          It should be...

           

          <ul>

            <li id="navhome"><a href="#"></a></li>

            <li id="navabout"><a href="#"></a></li>

            <li id="navequipment"><a href="#"></a></li>

          </ul>

           

          EDIT: It's really hard to say what exactly is causing the issue without seeing all of your code (could you post a link?), but invalid html is often the culprit in display issues.

          • 2. Re: List is disappearing
            osgood_ Level 8

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

            <html>

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

            <title>Untitled Document</title>

            <style type="text/css">

            ul {

            margin: 0px;

            padding: 0px;

            }

             

            ul li {

            list-style-type: none;

            float: left;

            }

             

            #navhome a {

            background-image: url(images/btn-nav-home.png);

            background-repeat: no-repeat;

            height: 88px;

            width: 66px;

            display: block;

            }

            #navhome a:hover {

            background-image: url(images/btn-nav-home1.png);

            }

            #navabout a {

            background-image: url(images/btn-nav-about.png);

            background-repeat: no-repeat;

            height: 88px;

            width: 66px;

            }

            #navabout a:hover {

            background-image: url(images/btn-nav-about1.png);

             

            }

             

            </style>

            </head>

             

            <body>

            <ul>

            <li id="navhome"><a href="#">Link One</a></li>

            <li id="navabout"><a href="#">Link Two</a></li>

            <li id="navequipment"><a href="#">Link Three</a></li>

            </ul>

            </body>

            </html>

            1 person found this helpful
            • 3. Re: List is disappearing
              Nancy OShea Adobe Community Professional & MVP

              Actually ID should be applied to the anchors; not the list items.

               

              <ul>

              <li><a id="navhome" href="#">Link One</a></li>

              <li><a id="navabout" href="#">Link Two</a></li>

              <li><a id="navequipment" href="#">Link Three</a></li>

              </ul>

               

               

              Nancy O.

              • 4. Re: List is disappearing
                osgood_ Level 8

                Nancy O. wrote:

                 

                Actually ID should be applied to the anchors; not the list items.

                 

                 

                 

                Nancy O.

                 

                 

                Wouldn't work with this css structure:

                 

                #navhome a

                 

                Might do with this

                 

                a #navhome

                 

                But I dont know as I never use that set up....the way I've shown it always works without failure for me.

                • 5. Re: List is disappearing
                  matthew stuart Level 2

                  Oh noooooo... I've got it working on the <li... I have just tried it on the <a, however it fell to bits again!

                   

                  I've switched about the #nav... and the 'a' to see if it makes a difference when applying it to the <a, but no joy. Here's the code I have that works with the <li:

                   

                  <style type="text/css">

                  ul {

                  margin: 0px;

                  padding: 0px;

                  }

                  ul li {

                  list-style-type: none;

                  float: left;  /* this helped a lot - thanks osgood */

                  padding: 0 3.7% 20px 3.7%;

                  }

                  #navhome a {

                  background-image: url(images/btn-nav-home.png);

                  background-repeat: no-repeat;

                  height: 88px;

                  width: 61px;

                  list-style-type: none;

                  display: block;

                  }

                  #navhome a:hover {

                  background-image: url(images/btn-nav-home1.png);

                  }

                  #navabout a {

                  background-image: url(images/btn-nav-about.png);

                  background-repeat: no-repeat;

                  height: 88px;

                  width: 66px;

                  list-style-type: none;

                  display: block;

                  }

                  #navabout a:hover {

                  background-image: url(images/btn-nav-about1.png);

                  }

                  </style>

                   

                  <ul>

                    <li id="navhome"><a href="#"></a></li>

                    <li id="navabout"><a href="#"></a></li>

                  </ul>

                  • 6. Re: List is disappearing
                    matthew stuart Level 2

                    OK, so the above code has created another issue for me where the menu was centered on the page, but now it will only range left. Here is the page that it should look like:

                     

                    http://egddev.co.uk/av/

                     

                    You'll notice with my swap image behaviour, as the page width reduces, the nav bar wraps around on to a second line and centres. How can I get it centered again?

                     

                    Thanks.

                     

                    CSS can really be more hassle than it's worth sometimes.

                    • 7. Re: List is disappearing
                      osgood_ Level 8

                      Browser couldn't find the page at:

                       

                      http://egddev.co.uk/av/

                       

                       

                      Are you still having problems?

                      • 8. Re: List is disappearing
                        matthew stuart Level 2

                        Sorry about that, yes I am still struggling to get it to centre.

                         

                        http://egdev.co.uk/av/

                         

                        Thanks

                        • 9. Re: List is disappearing
                          matthew stuart Level 2

                          I meant to say that what's on that domain is the swap image behaviour rather than the CSS version. I need the dev site to look correct for the client, that's why I pasted the code in this thread above.

                           

                          Once again, thanks for your advice, I do appreciate it.

                          • 10. Re: List is disappearing
                            osgood_ Level 8

                            Does the below work for you? I'm not sure you'll see anything in design view. But it seems to work once viewed in a browser.

                             

                             

                            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

                            <html>

                            <head>

                            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

                            <title>Untitled Document</title>

                            <style type="text/css">

                            ul {

                            margin: 0px;

                            padding: 0px;

                            text-align: center;

                            }

                            ul li {

                            list-style-type: none;

                            padding: 0 3.7% 20px 3.7%;

                            display: inline;

                             

                            }

                            #navhome a {

                            background-image: url(images/btn-nav-home.png);

                            background-repeat: no-repeat;

                            background-color:#0F9;

                            height: 88px;

                            width: 61px;

                            display: inline-block;

                             

                            }

                            #navhome a:hover {

                            background-image: url(images/btn-nav-home1.png);

                            }

                            #navabout a {

                            background-image: url(images/btn-nav-about.png);

                            background-repeat: no-repeat;

                            background-color:#9C0;

                            height: 88px;

                            width: 66px;

                            display: inline-block;

                             

                            }

                            #navabout a:hover {

                            background-image: url(images/btn-nav-about1.png);

                            }

                            </style>

                            </head>

                             

                            <body>

                            <ul>

                            <li id="navhome"><a href="#"></a></li>

                            <li id="navabout"><a href="#"></a></li>

                            </ul>

                            </body>

                            </html>