Not functioning in Flock

[braiiins]

Not having problems in any other browsers I’ve tested in, but I am having problems in Flock. The menus drop down fine, but get pushed behind the content (I have added z-index parameters in the css for #suckerfishnav and #suckerfishnav ul, but it doesn’t help). Also, when I try to select links under the main heading, the drop down menus disappear.

I am trying in Flock 1.2.6 on Mac, but was informed it is also not working on a version for Windows.

Test theme is here: http://pjmommy.com/?theme=stefy-test

CSS is:
[code:1jexkfsk]
#suckerfishnav {
    background:#eea69a;
    font-size:12px;
    font-family: "Century Gothic", Arial, sans-serif;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:30px;
    padding:0;
    margin:0;
    width:100%;
    z-index:999;
    }
#suckerfishnav a, #suckerfishnav {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    }
#suckerfishnav li li {
    width:99px;
    border-bottom:1px dashed #8f6630;
    font-family:helvetica,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:12px;
    color:#5A4F34;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#8c6732;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#fff;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#fff;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#5A4F34;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#fde9e2;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#eea69a;
    }[/code:1jexkfsk]

[imported_Ryan]

The menu is also having issues in Firefox 3.0.

The ‘More’ dropdown is popping up to the right instead of dropping down.

I suspect most of your problems are caused by the following tag … <div class="catnav">. Navigation wrapper tags from themes often cause these problems. Removing them or modifying the CSS so that it doesn’t affect the list inside it usually helps solve the problem. I haven’t checked for your particular site though.

[braiiins]

Nope, I checked that. Removing the catnav div doesn’t solve the problem.

That issue with the More dropdown doesn’t happen in Firefox Mac, but I do notice it in Internet Explorer 6.0 for Windows. I haven’t tested in any other IE version or in FF Windows yet, but I do know of the problem and don’t know what is causing it…

[braiiins]

Looks like I fixed the issue with Flock. The original designer of the css code I’m using for the theme put the header as overflow:hidden, which is what messed with the plugin code. I got rid of that, which pushed all of the content to the right, but after putting clear:both on the theme wrap div, everything seems ok.

The drop down is still pushed to the right on more, though… any idea on that?

[imported_Ryan]

Glad to hear you got it mostly working. Themers often don’t think of the ramifications of adding code like that. Overflow hidden causes havoc when you start inserting other bits of code in. I should probably write a tutorial on the reasons why not to do that at some stage, but I’m not sure I’ll ever get around to it. Unless you’ve come across the problem before a themer would probably never think of it – with good reason, since they’re trying to make a theme, not necessarily create something for inserting random chunks of code into. Excuse the rambling …

I’ll take a look at your new problem in an hour or so hopefully and see if I can find a fix for it.

[imported_Ryan]

An ‘hour or so’ was a bad estimate ” title=”Tongue” /> It seems I made a rather large mistake on a clients menu so have been fixing that instead.

I’ll have a try now and will report back shortly.

[imported_Ryan]

You need to place all menu items inside <a> tags. Even if you don’t want them linked anywhere, they require the <a> tags for styling purposes. If you don’t want the link to go anywhere, then use href="" so that it won’t direct the user anywhere.

This will be what was causing the menu to pop out to the side in IE7 instead of Firefox.

[code:1osdsi6y]<li class="cat-item">More
    <ul class=’children’>[/code:1osdsi6y]

If that doesn’t fix your other problems then let me know and I’ll take a look again.

[braiiins]

Ryan, awesome, it worked! Thanks so much for being so helpful!

I do have one more question. In IE6, the text in the drop down menus is white on the light pink background, very difficult to read. It works fine with the set color (a brownish) in other browsers, just not IE6.

[imported_Ryan]

I can’t see your dropdowns at all in IE6. No dropdown appears when I hover over the menu item!

Can you definitely see them in your install of IE6?

[braiiins]

That’s odd! Yes, they are there. My install is on VMWare Fusion, the program to run Windows on a Mac, I wonder if that makes a difference?

[imported_Ryan]

I think my IE6 install is fried ” title=”Sad” /> A new computer arrived today though, so I’ll be able to take a look once I have that up and running – maybe in a day or two.

[braiiins]

I know the feeling… I had to reinstall my Windows install on my Mac because it picked up some sort of serious virus or something… This is why I love my Mac!

Thanks for all your help ” title=”Smiley” /> I’m also wondering one more thing. I’m loading the categories through the menu, and was wondering if there is a way to rearrange? They are currently loading in alphabetical order, and my friend, whose site this is, wants them in her specified order.

[imported_Ryan]

To rearrange the categories, you would need to use the custom code option or setup a custom script to alter the arrangement.

[braiiins]

Custom code would be way too much work… she doesn’t even have all the sub-categories set up yet… Any idea on how to set up a custom script?

[imported_Ryan]

There are various options to alter the category arrangement. I don’t offer that type of support for free though. In fact I added as many options to the plugin as possible to avoid that. If you would like help, then feel free to sign up for our premium membership option …  https://geek.hellyer.kiwi/premium_support/

There are limitations on what configurations you can do though. I can’t remember all off the top of my head right now. If you have a particular configuration you’d like to setup then feel free to post back with specs and I’ll let you know if I can do it or not.

[Author]

Posts