css flyout issue

[xyonnoyx]

Having this issue with the css flyout contribution. With manufacturers box below the categories box the manufacturers header background stretches all the way up to the categories header.
Also the width of the categories sidebox appears different in firefox and IE. In firefox it is 5PX (I think from memory) narrower.

Well this image should show you what I mean anyway. This is firefox.



I have been trying to resolve these issues for a while and finally did a fresh install and still the same issue.
All I did this time was set up my custom template and install the css flyout contribution.

Thanks in advance.

[fricy]

I had the same issue with css flyout in firefox, but it worked flawlessly in IE.
After hunting for days for missing divs or errors in the code (being a new Zen hacker myself), I seem to have found a cure in the css:
Look for

div#nav-cat {float: left; width: 140px; margin: -1px 0 0 -1px;
background-color: #CE318C; font-weight:bold;}

and simply change to:

div#nav-cat {width: 140px; margin: -1px 0 0 -1px;
background-color: #CE318C; font-weight:bold;}

It worked for me. Can anyone explain to me why it works? :)

f.

[xyonnoyx]

OMG, it worked.

I don't know why it worked either but it did.
Hopefully someone will explain it to us.

Any way thanks for taking the time to post this. I had all but given up and decided
to just rearrange the layout of the page. This after massacreing the style sheets so many times I lost count. Tried changing anything and everything that even remotely
had anything to do with side box's. lol

Cheers

[mydanilo]

It worked for me too. BUT how do you get rid of the purple divider that shows below the categorie and the New Listing etc.?

[DrByte]

It worked for me too. BUT how do you get rid of the purple divider that shows below the categorie and the New Listing etc.?

in the tpl_categories_css.php sidebox template file, around line 28 is this:

    $content .= '<ul class="level1"><li><a href=""> </a></li></ul>';  // insert a blank line/box in the menu 

Try commenting it by adding // before it.

[mydanilo]

In the zip file I down loaded it was already like this:

// $content .= '<ul class="level1"><li><a href=""> </a></li></ul>'; // insert a blank line/box in the menu

Is this what you are talking about?

[mydanilo]

I just discovered another issue.

My menu width is set to 150px and it shows correctly in firefox but in IE it shows wider than the Categorie header. Looks like about 2pix too wide.
Why?

[mydanilo]

Here is a picture:

[DrByte]

Without seeing your site or your code, I would guess that it's related to some setting in the flyout css.
Probably a left-padding issue that's pushing the whole block in from the left by 2px, and thus out the right side by 2px, causing the whole column to be 2px wider than desired. If this is the case, perhaps telling the flyout css to use 148px instead of 150px might be the better approach... and if that leaves an unexpected gap in the other browsers, simply set the BG color to match so it's not "visible".

[Ryk]

Eureka!!

Been having the same problem (posted it somewhere else weeks ago) and finally found it:

(Line 22 of stylesheet_categories_menu.css)
div#nav-cat li a ...change the width to 140px

I've no idea why, but it works for me.