Jump to content

Flyout menu problem in IE6 and 7


chucke

Recommended Posts

Hello all!

 

I am new to this forum and I hope you can help me with a tricky css problem.

 

On my site (still being tested) www.typolight.loex.de/typolight the flyout suckerfish-style menu is not working correctly in IE 6 and 7.

 

Everything is fine as long as you haven?t klicked a menu-item, but with an "active" item selected the second level of the menu doesn?t appear next to the first level anymore when you hover over this item.

 

For example, if you click "Anwendungen" and hover overit afterwards, the second level of the menu is shown about 80px to the right of the menu...

 

Here the css:

 

/* Style sheet suckerfish */
.mod_navigation{position:absolute;overflow:visible;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
* html .mod_navigation{position:static;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
.mod_navigation ul{width:116px;margin:0px;padding:0px;list-style-type:none;}
.mod_navigation li{position:relative;padding-left:8px;background-color:#4a96cd;border-bottom:1px solid #2e6cbf;line-height:21px;}
.mod_navigation li.active{position:relative;}
.mod_navigation li.submenu{background-image:url("tl_files/loex/bilder/b_allgemein/submenu.gif");background-position:right center;background-repeat:no-repeat;}
.mod_navigation a{width:100%;display:block;text-decoration:none;color:#ffffff;}
.mod_navigation p{margin:0px;padding:0px;}
.mod_navigation li a{display:block;}
.mod_navigation li ul{position:absolute;display:none;margin-top:-22px;margin-left:108px;border-top:1px solid #2e6cbf;}
.mod_navigation li ul ul{width:135px;margin-left:108px;background-color:#4a96cd;}
*html .mod_navigation li ul,*html .mod_navigation li ul ul{margin-left:116px;}
.mod_navigation li.active{height:100%;color:#0e2a40;line-height:21px;}
.mod_navigation li:hover,.mod_navigation li.sfhover{background-color:#1a4579;}
.mod_navigation li:hover ul,.mod_navigation li.sfhover ul{display:block;}
.mod_navigation ul li:hover ul ul,.mod_navigation ul li.sfhover ul ul{display:none;}
.mod_navigation ul ul li:hover ul,.mod_navigation ul ul li.sfhover ul{display:block;}
* html .mod_navigation li{width:100%;float:left;}

 

 

Does anyone have an idea how I can fix this? In Safari and Firefox (Mac) the menu works fine.

 

Thank you very much and sorry if my post is difficult to understand!

 

chucke

Link to comment
Share on other sites

Hi newseed,

 

here are two images displaying the problem.

 

Usually (Image 2) everything is allright, the submenu shows beside the toplevel-menu when hovering the "buttons".

 

As soon as you have clicked one of the "buttons" in the toplevel-menu, so that one link is "active" (in this case "Anwendungen"), when you hover over this button the submenu is shown some distance to the right (Image 1) - in IE6 and 7 only (IE 8 not tested), FF and Safari are okay.

 

IE6 active linkhttp://www.copywrite.de/test/IE_active.png[/img]

 

IE6 active linkhttp://www.copywrite.de/test/IE_normal.png[/img]

 

Do you (or anyone) have any idea how I can fix this?

 

Thankyou for your support!

 

Christina

Link to comment
Share on other sites

Hi, well if it only happens when you click, I would first try commenting out the :active stuff. If that doesn't take care of it, then I would try commenting out the star hack ie stuff (AKA margin-left). Just keep narrowing it down untill you find what's doing it, and then take it from there. However, ie shouldn't need any hacks to make a flyout.

Link to comment
Share on other sites

Hi,

 

thank you for your suggestions, but unfortunately this doesn?t help - I actually don?t have any :active-pseudoclasses in my css.

Commenting out the .active class doesn?t change anything. Same with commenting out the star-hacks - I need them to correct the margins for ie6, otherwise the submenu is overlapping the main menu by some pixels. It has no influence on the gap between submenu and menu when one selected link is hovered.

 

The "active" divs are applied by the CMS (TYPOlight), and it must have something to do with them...

 

I just can?t think of a solution!

 

Christina

Link to comment
Share on other sites

If no one here finds the solution to your problem, try this multilevel drop down menu, I found it very easy to use, just a few tweaks in font size and spacing with different browsers.

htt p://sper ling.com/examples/menuv/

(remove spaces)

Link to comment
Share on other sites

I played with it for about twenty minutes, but I couldn't find what the cause was. Where did you get that code - it's horrible?! If I were you, I'd start over with it. Why don't you just copy and paste mine. It's done with less than half the code of that monster. http://www.visibilityinherit.com/code/flyout.php

 

That reminds me! FX 3.5 doesn't do animated gifs anymore - whats up with that?

Edited by Eric
Link to comment
Share on other sites

I don?t know - do you mean the CSS is horrible? I think it?s pretty straightforward? The HTML is from the CMS; so I don?t have any influence on that (I don?t know any PHP, so I can?t just write a new template...).

 

I am able to do a functioning suckerfish in plain HTML and CSS, actually this problematic site is online know (www.loex.de) with a functioning flyout menu. My problem is that I have to redo the site with the CMS (TYPOlight), and here I can?t figure out how to get this "active" classes to behave properly in IE.

 

Thank you for all your suggestions, I will have a look at those links you provided, but as I can?t rewrite the HTML I am afraid they will not be useful in this case - we will see. I will try to rewrite the menu from scratch, and if I fail I?ll have to redo it in another design!

 

Thanks a lot! I will keep you informed!

 

Christina

Link to comment
Share on other sites

If anyone is interested: I found a solution.

 

The menu displays properly with a "display: block" to the "active" span.

I had tried "li .active = display: block", and this had no effect, but by applying the style directly to ".mod_navigation .active" the gap goes away.

 

Poooh! But I will go over the complete stylesheet again to make it a bit less complicated as soon as I have the time...

 

Thanks agian for your help,

 

Christina

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...