Problem with Sort Order and Category Tab Simple Dropdown Menu Mod

[dbltoe]

Zen Cart 1.3.9h clean install with demo items.
Installed Category Tab Simple Dropdown Menu for testing.
PHP 5.3.6
MySQL 5.0.67
Linux 2.6.18-128.1.10.el5PAE

In another thread, a user was having trouble with the Category Tab Simple Dropdown Menu and one of the first things I noticed was the poor html with <br /> tags outside the <li> tags.

All attempts to remove the breaks resulted in the menu incorrectly wrapping menu items. That got to me and it became a challenge to find out what was happening.

I installed a clean 1.3.9h download (with demo) to one of our test sites and installed the mod with some adjustments to the mod and the the cart.

In the cart, I removed all but the Software, DVD Movies, Big Linked, A Top Level Cat, Sale New Price, and Big Unlinked directories in order to have a solid mixture of categories with and without sub-categories without having TOO much across the dropdown menu. I left the two "Big's" to make sure categories with only porducts were represented. I removed the linked items with master category IDs other than 22 from the Big Linked directory as they would not show in the dropdown and just as a process of getting to the bottom of the problem. (The problem with not gettting all products is connected to the query in the mod) There was another glitch in that the "Test Three" item in Big Unlinked was wrapping. This turned out to be from html embedded in the title of the product. (Again, something to be addressed in the mod at another time and not the cause of the problem.)

In the mod, I removed the css calls from the included tpl file and added them to the end of the stylesheet.css for the classic template. I removed the offending break tags from the included tpl_modules_categories_tabs.php file, created a templates directory under the classic directory, and loaded the tpl file there.

A clean load sets the categories tab menu to on, so there was no need to do any other changes or mods.

Starting the cart showed, the dropdown with all menus working correctly with the exception of Big Linked and Big Unlinked. Unlinked's problem turned out to be the embedded html in its title. Big Linked had two items ("A Maximum Sample of 1" and "A Maximum Sample of 3") on the same horizontal line of the dropdown. Further investigation showed that this was a dropdown that started from a category with no sub-categories and only products. This led me to the tpl_modules_catetgories_tabs.php file and the portion dealing with presenting categories with only products.

I first thought the problem might be with the Order By call in the query since it did not (like the other queries) include an Order By the product name but only by sort order. After several trial changes, this made no difference in the menu's presentation.

I then wondered if it might be that there were more than a certain number of products that triggered the wrap. Big Unlinked proved that assumption incorrect as there are far more products in that category than Big Linked,

My next step was to create sort orders for the products in the Big Linked as the demo items are all loaded with 0 as their sort order. My thought was that them all being 0, it could create the wrap. First I simply set the sort orders to match the IDs of the products. This still resulted in simply moving the two "A Maximum ..." items to a different line in the menu.

Then I noticed that the two wrapping items were together alphabetically, in product ID and in sort order. Then, I tried separating the two by setting 1's sort order to 10 and 3's sort order to 1000. As the French say, voila!

I have tried every combination that I can think of to break the menu in any other way, but the only way the menu fails is when these two items are placed together by sort order, product ID, or alphabetically. Breaking the chain with sort order makes everything work.

I double-screened the two products to see if there could be ANYTHING in the two products code- or symbol-wise that would cause this and couldn't see anything. And, I can't see anything in the database that might screw up a query.

So... I'm turning this over to this thread for review.

netzencommerceDOTcom/zc4 shows the cart as it appears with the two "A Maximum ..." items together either by Product ID, Sort Order, or Product Name.

netzencommerceDOTcom/zc5 shows the cart as it appears with the two "A Maximum ..." items separated by changing the Sort Order.

I'm stumped! Let's see what someone else can come up with. I'll be happy to provide admin username and password by PM if anyone wants to play.

THANX

[niccol]

Out of interest. Yes, I see what you mean - now that I look at it in Firefox. In chrome however ALL the items are on the same line, so the problem that you were describing does not really show at all.

Why are the <li>s display inline? I usually find that block works better across the range of browsers. But perhaps this is just the way that I roll.

Attached is a screenshot of what I see in chrome.

[niccol]

I don't think it has anything to do with sort order ( well not as such). It has to do with display inline.

It just happens that "A Maximum Sample of 1" and "A Maximum Sample of 3" put together are less than the width of the longest name. Because the longest name is setting the width of the container those two items, if they are next to each other can be squeezed onto one line. If they aren't next to each other they can't be squeezed onto one line. And the other items in the list are long enough that they take up a whole line too. Only those two items are short enough to fit on one line if they are next to each other.

As I say getting away from display inline is the way I would go. Actually by the looks of this I might rewrite the mod.

[dbltoe]

Well...
Not really concerned with the display in chrome as the site verifies with W3C except for the usual double of id whatsNew.
Just trying to figure out why these two products can change the menu so drastically with just a sort order change.

Okay, inline we can play with.

[niccol]

Well to be honest what I can't see is why any browser is not displaying it like chrome. In my view chrome tends to be the most accurate renderer.

I mean the <li> are inline so why is there a line break happening at all? Validation does not really have much to do with it. The html is valid but the way that the two browsers are rendering it is different. My point is that actually I think that the way chrome is rendering it seems most accurate. I can't see why the <li> would be on different rows. ( but I have only glanced at it so may be missing something)

Anyway, that is all a bit moot. Change to block and it will all start to work or at least you'll see why it doesn't.

[niccol]

And it isn't the sort order that is causing the issues as such, It is just an issue because you have two short <li> and one long <li> . Because they are inline if you put the short ones next to each other then they will appear on one line. If they are not next to each other they cannot go on one line.

Because they are all inline the whole menu is equivalent to a paragraph. There are no actual line breaks in there just places where the text wraps over. Even in firefox if you set a large width to the UL then they will all appear on the same line.

The issue is that the width of the containing element has not been defined - which leaves browsers free to interpret. The different browsers are interpreting differently.

[dbltoe]

The mod css is lacking to say the least. The inline calls were from incorrect or omitted css and the use of the navCatTabs in the mod.

The combination of errors only muddied the waters. I agree that the problem is indeed a wrap in the space but nothing I have been able to "tweak" has helped.

I have changed the file and css, so give it another go.

[niccol]

You are getting closer.

The reason that you still don't see the correct alignment is that there are still loads of 'float:left' in there. So the items that are small are still being stacked up on one line.

You need to go through the whole thing and get rid of all the float:lefts and then see where you stand.

A quick fix to check what is going on is to add a large width to the li's in question. Something like:

#navCatTabsDropdown ul li ul li{
width:300px;
}

I am not suggesting that as a final solution.

Actually, looking at it what I would suggest as a final solution is throwing away all the css and starting again.

But if you want to continue with the existing css then get rid of all the floats and then see where you stand.

(By the sounds of it the author of this mod had run into similar issues with inline elements and had solved it by putting <br/> tags outside the <li> elements which as you know is not a brilliant solution. When you removed them you revealed the underlying nonsense of this structure. If you want an inline element that has a break after it you probably want a block element by definition)

[niccol]

If you are going to start again then something like this will get you going:

#navCatTabsDropdown ul li{
position:relative;
display:block;
float:left;
margin-right:10px;
}

#navCatTabsDropdown ul li ul{
position:absolute;
left:-9999px;
width:150px

}
	
#navCatTabsDropdown ul li ul li{
float:none;
border:1px solid #aaa;
background:white;
}

#navCatTabsDropdown a.category-top:hover + ul{
left:0px !important;
}

Not perfect as it was done with the morning coffee but it is a start.

Personally I'd rewrite the whole mod because the structure of html is not ideal either. People's obsession with lists make this more difficult not easier.

[niccol]

Final thought on this. Why not use suckerfish ( or superfish or whatever the most recent version is) that does this kind of thing so well? That's the way I would go but again probably just got to do with me and the fact that most of my sites have jQuery loaded already.