Problem with Sort Order and Category Tab Simple Dropdown Menu Mod

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

[dbltoe]

I don't use this but wanted to fix the mod and, in the process, maybe learn something.

I seem to have everything but the alignment of the sub-menus working on netzencommerceDOTcom/zc4.

Take a look and see what you can do with firebug.

THANX