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 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Validating this short bit, UL/LI's

    Im having trouble getting this valid because of the IE problems.
    I am counting the ULs and LIs and I am not sure what im doing wrong.

    The code is here:
    http://www.lostseed.com/index.php (The menu at the top right of header)

    Heres the URL of code below if its easier to read outside of the forums and view source: http://lostseed.com/bin/drop-menu.php (no PHP is actually being written so its the same).

    PHP Code:
    <div class="menu">

      <
    ul>
      <
    li><a href="#">Extras<!--[if IE 7]><!--></a><!--<![endif]-->
      <!--[if 
    lte IE 6]><table><tr><td><![endif]-->
          <
    ul>
          <
    li><a href="../../extras/free-graphics/index.php">Free Graphics</a></li>
          <
    li><a href="../../extras/cd/index.php">LostSeeed CD</a></li>
          <
    li><a href="../../extras/quiz/index.php">Bible Quiz</a></li>
          <
    li><a href="../../extras/links/index.php">Suggested Links</a></li>
          <
    li><a href="../../extras/blind-of-god/index.php">FlashBlind of God</a></li>
          <
    li><a href="../../extras/hallowed-heart/index.php">FlashHallowed Heart</a></li>
          <!--[if 
    lte IE 6]></td></tr></table></a><![endif]-->
          </
    ul>
      
      
      
          <
    li><a href="../../../index.php#updates">Updates<!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if 
    lte IE 6]></td></tr></table></a><![endif]-->
      </
    ul>
      </
    li>


    </
    div
    Any help would be appreciated
    ~huggles~

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I donlt think you can 'interrupt' list data wiht the browser conditionals or any other content, for that matter. try your list without the conditionals and see how it works for you. then , can you come back and let us know what it is you are trying to achieve with the conditionals so we can help you there.

    Maybe others will see straight away what you are trying to do but I don't really.


    Second thoughts: if you are trying to have the content tabled for old browsers and listed by current and newer ones, then you may have to use JS to get the details of the users browser and serve up the appropriate/desired content. So basically, your two portions of code (tabled and listed), would be held in two separate files and shown according to the users browser.
    bazz
    Last edited by bazz; 06-02-2007 at 09:41 PM.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    If you compare the output, you can see the problems.

    Below is the code that browsers that parse SGML comments correctly will see. If you donít know, -- is the start and end delimiter of an SGML comment; this is contrary to popular belief that <!-- and --> are the delimiters.

    Anyway, from the below, you can tell that the final li end tag is in the wrong location.
    Code:
    <div class="menu">
    
      <ul>
      <li><a href="#">Extras</a>
          <ul>
          <li><a href="../../extras/free-graphics/index.php">Free Graphics</a></li>
          <li><a href="../../extras/cd/index.php">LostSeeed CD</a></li>
          <li><a href="../../extras/quiz/index.php">Bible Quiz</a></li>
          <li><a href="../../extras/links/index.php">Suggested Links</a></li>
          <li><a href="../../extras/blind-of-god/index.php">Flash: Blind of God</a></li>
          <li><a href="../../extras/hallowed-heart/index.php">Flash: Hallowed Heart</a></li>
          </ul>
      
      
      
          <li><a href="../../../index.php#updates">Updates</a>
      </ul>
      </li>
    
    
    </div>
    I would guess that Internet Explorer 7 sees, effectively, the same thing as above. The conditional comment is only meant to hide the end tag from versions of Internet Explorer other than 7. Note that the list item elementís end tag is still out of place.

    Internet Explorer 6, on the other hand, sees something totally different. You have an anchor element wrapped around a table, which is totally wrong. Furthermore, the unordered list thatís supposed to be contained within it has its end tag misplaced, the following anchor element has three unmatched end tags inside of it, and the list item containing said anchor element has its end tag misplaced (as is the case with Firefox and Internet Explorer 7).
    Code:
    <div class="menu">
    
      <ul>
      <li><a href="#">Extras
      <table><tr><td>
          <ul>
          <li><a href="../../extras/free-graphics/index.php">Free Graphics</a></li>
          <li><a href="../../extras/cd/index.php">LostSeeed CD</a></li>
          <li><a href="../../extras/quiz/index.php">Bible Quiz</a></li>
          <li><a href="../../extras/links/index.php">Suggested Links</a></li>
          <li><a href="../../extras/blind-of-god/index.php">Flash: Blind of God</a></li>
          <li><a href="../../extras/hallowed-heart/index.php">Flash: Hallowed Heart</a></li>
          </td></tr></table></a>
          </ul>
      
      
      
          <li><a href="../../../index.php#updates">Updates
          </td></tr></table></a>
      </ul>
      </li>
    
    
    </div>
    Note, also, that if the misplaced li tag is placed in the correct location, one of the list item elements is still missing an end tag. While itís not required in HTML, itís good practice to declare all optional end tags anyway. In XHTML, all end tags are required. Finally, note that # is not a correct URI.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    This menu is the one created by Stu Nicholls and found here.

    I would still consider it a mistake to use this:
    Code:
    <!--[if IE 7]><!--></a><!--<![endif]-->
    Because now the code is not forward compatible. There is no reason to believe that IE8 will not support conditional comments. But this implies that it will not see the </a> tag which it should.

    One ought to use this:
    Code:
    <!--[if gte IE 7]><!--></a><!--<![endif]-->


  •  

    Posting Permissions

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