Problem with Sort Order and Category Tab Simple Dropdown Menu Mod

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