...

View Full Version : Validating this short bit, UL/LI's



jream
06-02-2007, 08:48 PM
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).


<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">Flash: Blind of God</a></li>
<li><a href="../../extras/hallowed-heart/index.php">Flash: Hallowed 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~

bazz
06-02-2007, 09:39 PM
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

Arbitrator
06-03-2007, 08:16 AM
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.

<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).

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

koyama
06-03-2007, 06:23 PM
This menu is the one created by Stu Nicholls and found here (http://www.cssplay.co.uk/menus/final_drop.html).

I would still consider it a mistake to use this:


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


<!--[if gte IE 7]><!--></a><!--<![endif]-->



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum