Skip navigation
Currently Being Moderated

List is disappearing

Mar 15, 2013 8:09 AM

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>

 
Replies
  • Currently Being Moderated
    Mar 15, 2013 8:16 AM   in reply to matthew stuart

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 8:17 AM   in reply to matthew stuart

    <!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>

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 9:56 AM   in reply to osgood_

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 10:12 AM   in reply to Nancy O.

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 16, 2013 12:52 AM   in reply to matthew stuart

    Browser couldn't find the page at:

     

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

     

     

    Are you still having problems?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 16, 2013 11:41 AM   in reply to matthew stuart

    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>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points