Standard Nested UL cat tree styled via css

[aarcmedia]

Re: Standard Nested UL cat tree styled via css

We've also created drop down and slide out menus using both UL's and DIV's using bill's toolkit. I had originally input source code here for others but decided to yank it as it took a long time to get it done.

Reguarding the UL's not displaying properly in IE6, it can be done, and it's not all that difficult. Sure the new DIV only based dropdowns and flyouts are probably better and more cross-browser compatible, but assuming it can't be done is narrow-minded.

[RayYates]

Re: Standard Nested UL cat tree styled via css

Thanks Barrett for posting this.

For what it's worth the script does not close the open <li> tags. Adding </li> directly after each of the final </mvt:if> statements resolves the problem.

 
                                    </mvt:foreach>
                                    </ul>
                                </mvt:if>
                                </li>
                            </mvt:foreach>
                            </ul>
                        </mvt:if>
                        </li>
                    </mvt:foreach>
                    </ul>
                </mvt:if>
                </li>
            </mvt:foreach>
            </ul>
        </mvt:if>
        </li>
    </mvt:foreach>
    </ul>
    
</div>

[wcw]

Re: Standard Nested UL cat tree styled via css

Like I said, I misunderstood your use of the term browser hack. You weren't talking about things like

http://www.pcsympathy.com/2008/04/08/browser-hack-renders-routers-insecure/

[Biffy]

Re: Standard Nested UL cat tree styled via css

I was using the term hack in the classic sense. In the old days a hacker was a programmer:
Hacker

Nowdays we have the term "browser hack" which means coding around browser bugs:
Browser Hacks

[wcw]

Re: Standard Nested UL cat tree styled via css

Then I misunderstood. I thought it was a hacker issue as hacks was mentioned.

[Biffy]

Re: Standard Nested UL cat tree styled via css

Bill, the entire problem is with IE6 browser bugs for the UL container.

I learned it the hard way by using the UL in the cattree and then dealing with the constant flood of user complaints. Since I don't like working non-billable hours and I sure don't like customer complaints, I quit using the UL in the cattree.

I'll bet the guy that wrote that CSS book never built a Miva store and never had to deal with the customer complaints his recommendations cause.

The best way to understand this is to go ahead and use the UL in your cattree. Then put your email up for complaints. You'll quickly see the issue quite clearly.

[wcw]

Re: Standard Nested UL cat tree styled via css

I use <ul> all the time for various pages, usually without links though. If I have a link in it there is a security hole that can be hacked? Am I misunderstanding something?

[Biffy]

Re: Standard Nested UL cat tree styled via css

Steve,

Are you saying don't use <ul>....</ul> anywhere in html?

It's okay if it doesn't have any links in it and no rollovers.

[Barrett]

Re: Standard Nested UL cat tree styled via css

Can you provide some links please? I would be surprised if he recommended unnecessary code. There is nothing that I see in those cattree menu examples you provide above that require that level of complexity in coding.

IMO, in addition to the cross browser compatibility issues that Biffy outlined, your method adds a significant amount unnecessary html code to each page - it's kind of like using hedge clippers to mow your lawn - they will do a job but there are better and more efficient ways of completing the task.

As another issue, your list code is incomplete and will not validate in XHTML (missing the end list item tags i.e <\li>). To make it validate means even more code and lowers the text content to code ratio even more.

IMO, your method involves significant overcoding plus there are better solutions (except if you require a flyout menu). A sledgehammer will crack a nut but is it necessary?

My 2 cents.

I don't have any links for you. I have been reading a book he wrote, Transcending CSS, and he seems to steer firmly in the direction of using UL or OL for many many things including navigation. The extent of the list markup use is so extensive I'm certain if he had a Miva Cat Tree in hand when he authored the book it would have gone this route.

Hmm I never made any claims to XHTML in my markup....My stuff is currently 4.01 Transitional valid as stated in the page declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
to build on the default that merchant comes as set out of the box plus others have pointed out some 3rd party mods may not producce xhtml valid code.

If there becomes a compelling reason to update to that, I'll convert, but have other fish to fry at the moment.

You mention " text content to code ratio even more..." - I suppose the implication is SEO issues... I suppose your right about that although if I had nothing else better to do I could compare it to other cat tree structures for an exact code character count.
It seems like splitting hairs since other structures I've witnessed on other sites or simply the defaults as produced by Sebenza, Miva Merchant, or ToolKit out of the box had loads of nbsp and <br> tags...

So what exactly should we build these trees with in your opinion; sorry if I missed it in the thread ?
Div's nbsp <br> <p>

[Pete McNamara]

Re: Standard Nested UL cat tree styled via css

Andy Clarke would likely agree with my use of the list

Can you provide some links please? I would be surprised if he recommended unnecessary code. There is nothing that I see in those cattree menu examples you provide above that require that level of complexity in coding.

IMO, in addition to the cross browser compatibility issues that Biffy outlined, your method adds a significant amount unnecessary html code to each page - it's kind of like using hedge clippers to mow your lawn - they will do a job but there are better and more efficient ways of completing the task.

As another issue, your list code is incomplete and will not validate in XHTML (missing the end list item tags i.e <\li>). To make it validate means even more code and lowers the text content to code ratio even more.

IMO, your method involves significant overcoding plus there are better solutions (except if you require a flyout menu). A sledgehammer will crack a nut but is it necessary?

My 2 cents.

[Barrett]

Re: Standard Nested UL cat tree styled via css

Let me answer - don't use them in dynamically generated menus such as the category tree.

Why not other than issues related to IE browser hacks for extra menu features Biffy outlined ???

It is indeed a list and able and presentation controlled nicely with external css.

Other than using a list; the only thing I've been seeing is a tree loaded with nbsp, <br>, swarm of div's, and maybe somewhere I saw some of the above mixed with table cells etc.

So in my experiment with Tool Kit with a fully expanded tree as W3C valid what makes the UL structure such a bad thing ???

http://beta.handmade-paper.us/page/CPO/TK

[Pete McNamara]

Re: Standard Nested UL cat tree styled via css

Are you saying don't use <ul>....</ul> anywhere in html?

Let me answer - don't use them in dynamically generated menus such as the category tree.

[Barrett]

Re: Standard Nested UL cat tree styled via css

If I understand this correctly, you are willing to put up with extensive browser hacks in order to avoid paying for a module that displays an expanded cattree....

I never mentioned anything about avoiding paying for a module - which one where, who. ???
Tool Kit does it. Have it.
Sebenza's Cat tree does it have it, but don't use it due to some unresolved template issues that I covered using the stock Cat tree.

This is simply template code to generate the category tree fully expanded using WCW's Tool Kit module that I built based on a UL.
No browser hacks are requuired to display it in IE 6.

[wcw]

Re: Standard Nested UL cat tree styled via css

Steve,

Are you saying don't use <ul>....</ul> anywhere in html?

[Biffy]

Re: Standard Nested UL cat tree styled via css

My solution is simply an expanded cat tree as text and does not consider any advanced flyouts, iframes etc. I don't think anybody was asking for those at the moment.

If I understand this correctly, you are willing to put up with extensive browser hacks in order to avoid paying for a module that displays an expanded cattree. In my shop the time involved in writing a multi-level CSS UL menu costs a lot more than a module.

Personally, I would never use a UL container unless there was absolutely no other way to do the job. I'm doing drop-down menus now using other containers that do not have browser bugs to hack. For a simple expanded cattree I would never consider the UL container as a candidate.

IE6 commands about 1/3 of the global browser market (decreasing trend) and it is a diseased, infected puss-pocket of evil where the UL container is concerned. We're not allowed enough space in this message forum to list all the IE6 bugs when UL containers are used. There's hundreds of them.

In a few years, when IE6 dies, the UL container will become practical, even preferred, as an elgant cattree solution. Until they hold that funeral I'd avoid the UL like the plague.