Superfish: menu hidden by adjacent image; menu positioning

[4midori]

Hi,

I'm working on this design w/Superfish.

http://expdesign.net/clients/el

Notice that on IE6, some of the menus, like "Hot Topics" are hidden by
the menu image adjacent. Is there any way to correct this?

Also, in order to get my first level drop-downs to be positioned
properly, I had to style each <ul> with width and margin. Is this OK
to do?

Thanks,

Ben

[Joel Birch]

2008/7/23 Ben.Seigel <expdesign.net@...>:

>
> Hi,
>
> I'm working on this design w/Superfish.
>
> http://expdesign.net/clients/el
>
> Notice that on IE6, some of the menus, like "Hot Topics" are hidden by
> the menu image adjacent. Is there any way to correct this?
>
> Also, in order to get my first level drop-downs to be positioned
> properly, I had to style each <ul> with width and margin. Is this OK
> to do?
>
> Thanks,
>
> Ben
>

Hi Ben,

It may be easier at this point to cut the images off above their drop
shadow (the bit that overlaps the submenus) and apply the shadow to
the underlying main image. Or you could try using background images on
the links rather than img tags, although this is trickier as you then
need to use image replacement techniques to achieve the same look
while ensuring accessibility isn't affected.

Regarding the width and margins of the ul, this is fine to do although
I would have not used inline styles to achieve it. Better to target
each ul via an id from within an external CSS file.

Joel Birch.

[Joel Birch]

I just noticed that you haven't hooked up the shadow image or the
arrows image correctly although the CSS is trying to load them. Make
sure you have those images on your server and change the path in the
CSS file to point to them if you wish to use either of those features.
Otherwise you should disable those features via the options object as
described in the Superfish documentation. Here is an example you could
use to do all of these things - assuming you want to disable the
shadows and arrows:

$(document).ready(function() {
    $('ul.sf-menu').superfish({
        autoArrows : false,
        dropShadows : false
    });
});

Then you can and should delete the blocks of CSS pertaining to the
arrows and shadows - both are clearly marked in the CSS file. Hope
This helps.

Joel Birch.

[4midori]

Joel,

Thanks for the quick response!

Indeed, I should disable the arrows, as I am not using them.

I do want the shadows, but my file structure is different, so I don't
know how to point superfish.css to shadow.png; it never seems to be
found.

ROOT
-index.html
CSS
-superfish.css
-other css files
SCRIPTS
  SUPERFISH
  -superfish.js
  JQUERY
  -jquery1.2.6.js

[Joel Birch]

Maybe start simple by putting the image in the same folder as
superfish.css then change the path in the CSS to simply:

url(shadow.png)

That can't fail to work.

Joel.