Strange list/anchor problem

[hitchyali]

Originally posted this in wrong category*

Hey Guys,

They problem can be seen here:

http://collossalpixel.com/doodles/this-is-a-new-post/

On the right is a sidebar. This sidebar has two toggle-slide features. One feature is for 'FILTER CATEGORY' and another is for 'FILTER DATE'.

The problem is that when the toggle is switched, and the hidden box is then shown, the <ul> and <li> elements in this box do not show - However! they are clearly visible in the code, but just do not show up on screen.

Another strange added problem is that when the toggle is switched and the hidden box is shown, the toggle trigger (down arrow) itself actually changes its link. By this I mean, it should only show and hide the box. However, when shown, the link then becomes one of the links that is supposed to be in the <li> element.

If you use Firebug with FF to look at this you should see what I mean.

Does anybody have any idea how this is happening/what the problem is and then of course, how to fix it?

Many Thanks,
Ali

 

[vacunita]

The fact that your lists are completely invalid surely has something to do with it.

The fact is your lists are there, they are just beyond the viewable area of your panels.

<div id="filter-category">
            <h3>Filter Category</h3><p><a class="toggle-trigger" title="View Categories" href="#">Open</a></p>

            <div class="show-container">
			[red]<li class="categories">Categories<ul>[/red]	<li class="cat-item cat-item-6"><a href="[URL unfurl="true"]http://collossalpixel.com/category/doodles/"[/URL] title="View all posts filed under Doodles">Doodles</a>
</li>
	<li class="cat-item cat-item-8"><a href="[URL unfurl="true"]http://collossalpixel.com/category/hockey/"[/URL] title="View all posts filed under Hockey">Hockey</a>
</li>
	<li class="cat-item cat-item-7"><a href="[URL unfurl="true"]http://collossalpixel.com/category/latest-news/"[/URL] title="View all posts filed under Latest News">Latest News</a>
</li>
	<li class="cat-item cat-item-9"><a href="[URL unfurl="true"]http://collossalpixel.com/category/tutorial-of-the-month/"[/URL] title="View all posts filed under Tutorial of the Month">Tutorial of the Month</a>

</li>
	<li class="cat-item cat-item-1"><a href="[URL unfurl="true"]http://collossalpixel.com/category/uncategorized/"[/URL] title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
</ul></li>            </div><!--end .toggle-container-->
        </div><!--end #filter-category-->
        
        <img src="/wp-content/themes/alihitch/images/line-repeat2.jpg" width="100%" height="2px" />
        
        <div id="filter-date">
            <h3>Filter Date</h3><p><a class="toggle-trigger2" title="View Archives" href="#">Open</a></p>

            <div class="show-container2">
            		[red]<li><a href='[URL unfurl="true"]http://collossalpixel.com/2010/10/'[/URL] title='October 2010'>October 2010</a></li>
	<li><a href='[URL unfurl="true"]http://collossalpixel.com/2010/09/'[/URL] title='September 2010'>September 2010</a></li>
	<li><a href='[URL unfurl="true"]http://collossalpixel.com/2010/06/'[/URL] title='June 2010'>June 2010</a></li>
	<li><a href='[URL unfurl="true"]http://collossalpixel.com/2010/05/'[/URL] title='May 2010'>May 2010</a></li>[/red]
            </div><!--end .toggle-container-->
        </div><!--end #filter-date-->

You start by opening a <li> (list item) tag that belongs to no list. Then inside that list item, yo open a <ul> (unordered list) which encompasses the rest of the list items.

Then for the Date Filer, you simply have no actual list. either <ul> or <ol> to hold your list items.


Your page also has 27 errors you should fix. Otherwise there's no way to tell what the results are going to be.

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/