Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get to validate

    My code validates except for one error:

    "Line 40, character 26:
    <ul id="submainlist">
    ^
    Error: element UL not allowed here; assuming missing LI start-tag"

    I included the HTML, then the CSS below. This page works fine in Netscape, gets buggy in IE. Can anyone tell me why the Error?

    This is the HTML:
    <div id="maincontainer">
    <ul id="mainlist">
    <li><a href="/index.html">Home</a>
    <li><a href="/renopener.html">Instruments</a></li>
    <li><a href="/Pricelistframe.html">Price List</a></li>
    <li id="active"><a href="/salesinfo.html" id="current">Contact Us</a></li>
    (LINE 40 IS HERE) <ul id="submainlist">
    <li><a href="/rick.html">About Rick</a></li>
    <li id="subactive"><a href="#" id="subcurrent">Links</a></li>
    <li><a href="/privacy.html">Privacy Notice</a></li>
    </ul>
    </li>
    <li><a href="/forum/phpBB2/">Discussion</a></li>
    </ul>
    </div>


    And here is the CSS:
    #mainlist
    {
    position: relative;
    width: 100%;
    height: 1.05em;
    margin: 0;
    padding: 0;
    border-bottom: 3px solid #f63;
    white-space: nowrap;
    }

    #mainlist li
    {
    float: left;
    margin: 0 0 0 2px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #aaa #555 #f63 #999;
    list-style-type: none;
    }

    #mainlist li a
    {
    position: relative;
    width: 7em;
    display: block;
    margin: 0;
    padding: 1px 0.4em;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #ccc;
    background-color: #eee;
    color: #666;
    font: normal 0.7em/120% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
    }

    #mainlist li a:hover
    {
    color: #00c;
    text-decoration: underline;
    background-color: #f63;
    }

    #mainlist li#active a
    {
    font-weight: bold;
    background-color: #f63;
    color: #fff;
    border-color: #f96 #c30 #f63 #f96;
    }

    #mainlist li#active a:hover { color: #fff; }

    #mainlist ul#submainlist
    {
    position: absolute;
    width: 100%;
    left: 0;
    top: 1.25em;
    height: 0.75em;
    margin: 0;
    padding: 0;
    border-bottom: 3px solid #f63;
    white-space: nowrap;
    }

    #mainlist ul#submainlist li
    {
    width: 14ex;
    margin: 0;
    border: 0;
    }

    #mainlist ul#submainlist li a
    {
    width: auto;
    padding: 0.06em 1em 0;
    border: 0;
    background-color: #fff;
    color: #000;
    font: normal normal 0.66em/110% Verdana, Arial, sans-serif;
    }

    #mainlist ul#submainlist li a:hover
    {
    color: #00c;
    text-decoration: underline;
    font-weight: 400;
    /* IE5/Mac disappearing item fix */
    }

    #mainlist ul#submainlist li#subactive a
    {
    background-color: #fc9;
    color: #000;
    }

    * html > body #mainlist, * html > body #mainlist ul#submainlist
    {
    width: 600px;
    /* IE5/Mac fixed width fix */
    }

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please put your code in code brackets, when you post, the button for it is a little number sign. The reason it doesn't validate is because you cannot nest it that way, you have to nest it this way. First, you didn't close your home li, so close that, then nest it properly (within an li):
    Code:
    <ul id="mainlist">
    <li></li>
    <li></li>
    <li></li>
    <li id="active">
       <ul id="submainlist">
          <li></li>
          <li id="subactive"></li>
          <li></li>
       </ul>
    </li>
    <li></li>
    </ul>
    See how I did that? I closed your home li, and then I put that other ul inside an li, and closed the li after the ul -- I've done that before it's -- just remember anything that lists inside lists must sit inside an li.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    New Coder
    Join Date
    Aug 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, I thought those code tags were for that but I wasn't sure. I'll do that from now on.

    got it on the coding, thanks, that was easy, and with a little more persistence on my part I probably would have found such basic errors.

    now, another question, I want to put a little padding, or increase the margin on the bottom of the container so that there is separation between this div and the next.
    can that be done with:
    margin 0px 0px 0px 5px; (can't remember now, but it goes left, right, top bottom, right?) in the same div?

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's:
    top right bottom left

    so:
    Code:
    margin: 0px 5px 0px 0px;
    That's for padding too

    and, yes, you can put it on that div, or put a top margin on the one below, your preference.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    its top right bottom left, but apart form that you are correct.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #6
    New Coder
    Join Date
    Aug 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, and Readme.Txt, your signature makes me feel better about asking questions that I know are all over the place, but I am too lazy to go and read about them.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •