chucke

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

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

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

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. http://www.copywrite.de/test/IE_active.png[/img] http://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

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