Suckerfish Menu Problems

Hi all - I am trying to redesing our site using CSS instead of tables. I am having some trouble with the Suckerfish menu and hope someone can help me.

In FF, everything is fine. In IE I have a couple of problems.

Please look at this page:
http://www.threesistersfabric.com/experiment/template.htm
In FF it works it IE it doesn't at all.

So - I removed the javascript from the top and bottom of the page (I don't really know anything about js, just cut and pasted what was recommended.) and it works (...sort-of):
http://www.threesistersfabric.com/experiment/template2.htm

As you can see, in IE the pop out menues are being covered by the main <ul>. How do I fix this? Sure hope someone can help! And, will it cause problems to remove the js?

Thanks,
Allison

 

Um, does anyone know? I am just plain stuck...

 

Hi,

look into the css z-index: property.

An object with this style="z-index: 3"
will over lay an object with this
style="z-index: 2"

Hope this helps

 

Thanks, seamus.hogan. I did fool around with that some. I had the same trouble in FF until I added the z-index to the li ul style, but it didn't work for IE. I put a z-index everywhere I thought feasible to fix the IE problem and couldn't get it. Did I miss something? Do you know just where I should put it?

 

Hi three sisters.

This is pretty much it with one little bit still not perfect but a bit of fiddling on your part should be able to sort that.

<DIV id=menu>
<UL class=main id=nav>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Books</A>
</LI>
<LI style="z-index: 2"><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Fabric</A>
<UL style="z-index: 3">
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Fabric by
Collection</A> </LI>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Backings
&amp; Muslins</A> </LI></UL></LI>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Gifts</A>
</LI>
<LI style="z-index: 2"><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Notions</A>

<UL style="z-index: 3">
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Batting</A>
</LI>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Cutting
Tools</A> </LI>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Fasteners
Etc.</A> </LI>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Marking
Aids</A> </LI>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Mats
&amp; Rulers</A> </LI>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Pins
&amp; Needles</A> </LI>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Quilting
Accessories</A> </LI></UL></LI>
<LI><A
href="http://www.threesistersfabric.com/experiment/template2.htm#">Patterns</A>
</LI>

Hope this helps

Regards

 

Thanks - it worked. I was trying to do it on the style sheet by changing the ul li and the li ul z-indexes. I also fiddled with a few of the others. I wish I knew why it didn't work. At least the fix was simple!

I tried to add a z-index of 2 (also tried 1) to the 'gifts' li because the bottom left border of fabric menu is being covered. That just resulted in the previous problem. Oh well - at least it is functioning and not totally covered any more!

You've been a great help! Thanks a bunch!

~Allison