1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Why does Suckerfish not work in IE7?

Discussion in 'CSS' started by Stomme poes, Feb 19, 2008.

  1. #1
    I think think think this is a Haslayout thing but I just can't tell WHY.

    I have a version of suckerfish menu here: http://stommepoes.nl/fish.html

    Hover over Fish. The submenu is sitting off to the side... on the site I'm actually working on, the submenu is only a few em to the left so I can watch but on this demo something (I thinnk the menu itself) is pushing it to the left. No matter. Waive a proper browser's mouse over FISH and you'll see the subs move. Nothing happens in IE7 (though it clearly shows there is a link there).

    Disregard IE6, as the Javascript in Suckerfish is specifically for IE6... and yet, IE7, which supports hover just fine on its own, does not do anything without the Javascript there-- regardless of what the Javascript is doing! I think somehow it's setting layout but have no clue how.

    I also don't know what it would be setting layout on. The subs already have layout as they are positioned absolutely. It could be the :hover itself, but the answers I've gotten from reading another thread (using variations of position: relative) always kill my menu's true layout.

    Anyone have any ideas? Even if you add the Javascript back in (from http://www.htmldog.com/articles/suckerfish/dropdowns/ ), it still shouldn't work as I have removed the new classes from the CSS (so it will not work for IE6) but it makes IE7 behave. Just by existing.
     
    Stomme poes, Feb 19, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Aaaaaaaaaaaaaaaaaarrrrrrrrrg!!!!!!!!!

    Arg arg arg arg arg!

    It was (of course) the same thing I've been telling everyone else.... aaaaaaaarrrrg!

    #menu li:hover ul {
    visibility: visible;
    left: auto;
    }


    Setting f********** Hazlayout on the hover... I couldn't get it to work with other traditional hazlayout triggers, dunno why.... aaaaaaaarrrrrrgggg!!!

    My hair, it's gone, bald spot arg. Tug Tug Tug...

    If I ever ever ever meet a Miscrosoft browser programmer in a dark alley rrrrrrrrr....
     
    Stomme poes, Feb 19, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Aaaaaaaaaaaaarhg! It got even worse! Even after I knew better!!!!!!!!!!!

    Visibility: visible only works ONCE in IE7. For the next level, I needed to use something that was previously unused in the code to trigger Haslayout once again-- something I knew from KenB and SuzyUK's thread on webmasterworld. Damn. But I had forgotten it.

    Couldn't set a width-- I'd already done that for styling reasons on the first LI.
    Couldn't set a height-- needs to be auto.
    Couldn't float the :hover... just won't work here
    I ended up using display: inline-block just for IE7, then changing it back immedately with display: block; in a new instance of the problem element (who knows what some browser might do with it... I'm not very familiar with inline-block cause FF doesn't support it and IE only on things already inline...)

    If I needed another level, I'm not sure what I'd use.
     
    Stomme poes, Feb 19, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Some advice, don't use suckerfish and it's bloated extra class nonsense for the IE support - just write it for normal :hover, then tack on peterned's csshover2.htc.

    Then set position:relative on your LI... and set left to 0 instead of auto... and set left to -1000em for the off state.

    But the 'real' issue with your hover state is that IE won't rerender the element on hover without a 'display' attribute change. Set display:block on the hover and 7 behaves (that's a wierd one)

    Oh, and I have no idea why that 'fixed width' for opera would be neccessary - as in my experience it is not, at least not for the topmost items.

    Try this on for size:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html 
    	xmlns="http://www.w3.org/1999/xhtml" 
    	lang="en" 
    	xml:lang="en"
    ><head>
    
    <meta 
    	http-equiv="Content-Type"
    	content="text/html; charset=iso-8859-1" 
    />
    
    <title>
    	Template
    </title>
    
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    
    * html body {
    	behavior:url(csshover2.htc);
    }
    
    #nav {
    	float:left;
    	width:100%;
    }
    
    #nav,
    #nav ul {
    	list-style:none;
    	line-height:1.2em;
    }
    
    #nav li {
    	float:left;
    	padding:0 10px;
    	position:relative;
    }
    
    #nav li ul {
    	position:absolute;
    	left:-1000em;
    	top:1.2em;
    	width:10em;
    	background:#888;
    }
    
    #nav li:active ul,
    #nav li:hover ul {
    	display:block;
    	left:0;
    }
    
    #nav li li {
    	float:none;
    	display:inline;
    	padding:0;
    }
    
    #nav li li a {
    	display:block;
    	padding:0 10px;
    	height:1%; /* haslayout makes whole anchor clickable IE */
    	background:#EEE;
    }
    
    #nav li li a:active,
    #nav li li a:hover {
    	background:#DDD;
    }
    </style>
    
    </head><body>
    
    <!-- empty spans below are image replacements, do not remove -->
    
    <ul id="nav">
      <li><a href="#">Mutants</a></li>
      <li><a href="#">Freaks</a></li>
      <li><a href="#">Frogs</a></li>
      <li><a href="#">Fish</a>
        <ul>
          <li><a href="#">Types</a></li>
          <li><a href="#">Of</a></li>
          <li><a href="#">Stupid</a></li>
    		  <li><a href="#">Fish</a></li>
    		</ul>
      </li>
      <li><a href="#">Filo Farnswerth</a></li>
      <li><a href="#">FOO</a></li>
    </ul>
    
    <div id="content">
      <p>foo</p>
    </div>
    
    </body></html>
    Code (markup):
    That's what you are trying to do, ja? (I tacked on some simple colors and hover states)

    Tested ok all the way back to IE 5.5 - and all the way up to FF 3 beta/OP 9.5 beta/Safari 3 Beta.
     
    deathshadow, Feb 19, 2008 IP
  5. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You are always throwing out stuff that is over my head! Just when I think I have a handle on things, you put something like this in your code. :)

    Do you have a link or more information where I can learn more about this line in your CSS?

    Thanks,

    Blake
     
    ChaosFoo, Feb 19, 2008 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    http://www.xs4all.nl/~peterned/csshover.html

    You include that via your CSS, and IE 6/earlier gains :hover and :focus on all elements - at least when .js is on. (as always, have a .js off plan just in case - just as you should have a css off plan)

    It's a little large, but being you'd only be serving it to about a third of the average sites traffic (hence hiding it behind a * html hack) - it's much more practical and likely lower traffic than the class heavy suckerfish, or that stupid 'nested table' technique I've seen a few places.

    Which is what .js of this nature should be for in the first place - write the site to work by the standards, then fill in the blanks in the older browsers by adding missing behaviors.
     
    deathshadow, Feb 19, 2008 IP
  7. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks, I really appreciate the help.
     
    ChaosFoo, Feb 19, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    That's what I was doing! I planned on using the whatever:hover cause I already had it for the Stu menu (which I was hoping to replace with the Suckerfish because the css is so much f*****ing cleaner!!!), so I made my menu without the extra CSS bs and removed the javascript-- and IE7 did nothing.

    Triggering layout didn't work with the same tool the same time. You could set display: block once, but then never again. It's something about the haslayout trigger on the :hover itself-- it must be different every time.

    as far as I know, it didn't have to be fixed width but just A width... and possible this was with an older Opera (referring to the A List Apart Suckerfish).

    This is what I ended up with:
    
    /*CSS voor gppo2 */
    
    * {
      padding: 0;
      margin: 0;
    }
    img, fieldset {
      border: none;
    }
    
    ul, li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    /*header and body CSS here... some stuff is floated in the #header */
    
    * html body {behavior: url(csshover.htc);} /*I don't like javascript filthing my HTML*/
    
    
    #menu {
      clear: both;
      position: relative;
      border: 1px solid #000;
      height: 40px;
      background: #55565a url(GPPO/menubackground.gif) center top repeat-y;
    }
    
    #menu li {
      float: left; /*haslayout trigger number one and two... not for that purpose but they're already here*/
      width: 8em;
      border-right: 1px solid #fff;
    }
    
    #menu a {
      display: block;
      text-align: center;
      color: #fff;
      text-decoration: none;
      font: bold 18px/40px Verdana, Arial, Helvetica, sans-serif;
    }
    	#menu li.laast {
    	  border-right: none;
    	}
    	#menu a:focus, #menu a:hover, #menu a:active {
      	  background-color: #d8f1f6;
      	  color: #fdb302;
    	}
    
    #menu ul, #menu ul ul {
      position: absolute;
      width: 8em;
      left: -999em;
    }
    #menu ul ul {
      margin: -30px 0 0 8em;
    }
    	#menu li:hover ul ul {
      	  left: -999em;
    	}  
    	#menu li:focus ul, #menu li:hover ul, #menu li:active ul {
    	  visibility: visible; /*next haslayout trigger*/
    	  left: auto; 
    	}
    	/*... if I ever meet a Microsoft developer in a dark alley...*/
    	#menu li li:focus ul, #menu li li:hover ul, #menu li li:active ul {
    	  display: inline-block;  /*can't use something that's been used already to trigger haslayout, so width, float and visibility-visible are already used*/
    	}
    	#menu li li:focus ul, #menu li li:hover ul, #menu li li:active ul {
    	  display: block; /*setting it back the way I want*/
    	  left: auto;
    	}
    	
    #menu ul li {
      border-right: none;
    }
    
    #menu ul a, #menu ul a:visited {
      background-color: #d8f1f6;
      display: block;
      font-weight: normal;
      font-size: 14px;
      line-height: 30px;
      color: #000;   
      text-align: center; 
      border-left: 1px solid #8dbec8;
      border-top: 1px solid #8dbec8;
    }
    	#menu ul a:focus, #menu ul a:hover, #menu ul a:active
    	#menu ul :focus > a, #menu ul :hover > a, #menu ul :active > a {
      	  background-color: #8dbec8;
    	  font-weight: bold;
      	  font-size: 12px;
      	  color: #fff;
      	  border: 1px solid #535459;
    	}
    	#menu ul ul a, #menu ul ul a:visited {
      	  padding: 0 5px;
    	}
    	#menu ul ul li.dubbel a {
    	  line-height: 20px;
    	}
    
    #menu :focus > a, #menu :hover > a, #menu :active > a {
      color: #fdb302;
      background: #d8f1f6;
    }
    
    #wrapper {
      clear: left;
    
    Code (markup):
    I'd have to try yours out, but I'm suspecting the only huge difference is that you're floating the whole menu, which might be solving a lot of IE issues right there.

    The whole point was, if you copy Suckerfish (Sons) word-for word, and then remove the javascript, IE7 stops working on :hover and it shouldn't. I tested this again and again and it's haslayout, no question. I can't test anything for IE6 until this page is set on the work server where whatever:hover resides.

    *Edit: where it's at now: http://stommepoes.nl/Guis/personalgppo.html

    *Edit 2: setting display: block where I had inline-block worked, but trying to merge everything together didn't:
    
    	#menu li:focus ul, #menu li:hover ul, #menu li:active ul {
    	  visibility: visible;
    	  left: auto; 
    	}
    	#menu li li:focus ul, #menu li li:hover ul, #menu li li:active ul {
    	  display: block;
    	  left: auto;
    	}
    
    Code (markup):
    This is where I removed the display: inline-block and just left the display: block. However, since these to things are doing the same job, I should be able to do this:
    
    	#menu li:focus ul, #menu li:hover ul, #menu li:active ul,
    	#menu li li:focus ul, #menu li li:hover ul, #menu li li:active ul {
    	  display: block;
    	  left: auto; 
    	}
    
    Code (markup):
    It's not enough. It seems I have to keep them seperate, or keep visibility: visible or something. Or, I might still be right and still need one vis:vis for one trigger, and diplay: block as another, since I'm not sure if I've used it before specifically for the :hovers.
     
    Stomme poes, Feb 20, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Nope. Unless I f*cked it up while adding the third level sub which is extremely possible: http://stommepoes.nl/Menus/deathshadowmenu.html
    
    #nav li ul, #nav li li ul, #nav li:hover ul ul, #nav li:active ul ul {/*last is new*/
    	position:absolute;
    	left:-1000em;
    	top:1.4em;
    	width:10em;
    	background:#888;
    }
    
    #nav li:active ul, #nav li:hover ul {
    	display:block;
    	left:0;
    }
    /*below is new*/
    #nav li ul li:hover ul, #nav li ul li:active ul {
            display: block;
    	left: 10em;
    }
    
    Code (markup):
    After adding a third level, this should work and it does in all normal browsers. But not IE7.

    Changing the above to this:
    
    #nav li ul, #nav li li ul, #nav li:hover ul ul, #nav li:active ul ul {/*last is new*/
    	position:absolute;
    	left:-1000em;
    	top:1.4em;
    	width:10em;
    	background:#888;
    }
    
    #nav li:active ul, #nav li:hover ul {
    	display:block;
    	left:0;
    }
    /*below is new*/
    #nav li ul li:hover ul, #nav li ul li:active ul {
            [b]visibility: visible;[/b]
    	left: 10em;
    }
    
    Code (markup):
    Magically fixes the issue. Can I pwease has layout??

    *edit the way I have this set up now, there is a discrepancy between Safari, FireFox, and Opera/IE7... however the way I got it on my other site with all the fancy styling etc. the height of the third-level sub is not a problem.
     
    Stomme poes, Feb 21, 2008 IP
  10. Suzy

    Suzy Peon

    Messages:
    27
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Hi stomme.. found you ;) I was working on this for someone else today.. and had a breakthrough

    The Suckerfish Code is fatally flawed for IE7 - taking the : http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones3.html
    (ooops I'm too you to link this 3 level bare bones[/URL] example...

    firstly there is no position relative on the parent li, so what are the children being absolutely positioned to?
    add position:relative; to #nav li:hover also add a z-index of 1 the zi-index helps IE's stacking order which isn't apparent in this example but does crop up, secondly it's added to li:hover for a reason.. Remeber IE doesn't like activating ANY extended hover rules if the basic one isn't in place .. so for example you can't easily apply an a:hover span {} if you haven't applied an a:hover same applies to any hover rule for IE

    then last but not least, the real flaw that IE7 doesn't like, if there are any hasLayout triggering properties on the hidden ul's move them to the unhidden - :hover ul rule. In testing of the barebones I found that positon absolute: didn't fall into this category this time! that's because they are using the negative left hiding method so it's not a redraw as such.. however another I was working on earlier which was using the display hiding method did need the absolute positioning rule moved.. in the bare bones example it's the 10em width that needs moved

    corrected code for the above example showing IE7 working without the script
    body {
    	font-family: arial, helvetica, serif;
    }
    
    #content {
    	clear: left;
    	color: #ccc;
    }
    
    #nav, #nav ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    }
    
    #nav li { /* all list items */
    	float: left;
    	width: 10em; /* width needed or else Opera goes nuts */
    }
    
    
    #nav a {
    	display: block;
    	width: 10em;
    }
    
    #nav li ul ul { /* third-and-above-level lists */
    	margin: -1em 0 0 10em;
    }
    
    #nav li ul { /* second-level lists */
    	background: orange;	
    	position: absolute;	
    	left: -999em;
    	/* using left instead of display to hide menus because display: none isn't read by screen readers */
    	/* using this method avoids the need to move position:absolute for 
    }
    
    /* added this rule, for two purposes - positioning/stacking in IE adn the need for it
       to have a simple hover rule before it will apply the extended ones below 
    */
    #nav li:hover, #nav li.sfhover {
    	position: relative;
    	z-index: 1;
    	}
    
    #nav li:hover ul {width: 10em;} /* moved from hidden list rule */
    
    #nav li:hover ul ul, #nav li.sfhover ul ul, 
    #nav li:hover ul ul ul, #nav li.sfhover ul ul ul {left: -999em;}
    
    #nav li:hover ul, #nav li.sfhover ul,
    #nav li li:hover ul, #nav li li.sfhover ul, 
    #nav li li li:hover ul, #nav li li li.sfhover ul {left: 0;}
    Code (markup):
    I was searching for the suckerfish problems, that's how I found this thread

    -Suzy
     
    Suzy, Feb 21, 2008 IP
  11. Suzy

    Suzy Peon

    Messages:
    27
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    ooops have some spelling errors in there and a missing */ in the CSS, it's won't let me edit the post because it thinks that that non-link is a link..
    I broke the board with my first post :eek:

    anyhow the only important one

    should read

     
    Suzy, Feb 21, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Hi Suzy. Oct 2004? You joined and then left? : )
    In my actual working version (the actual page I was working on, not the fish.html example), I had position: relative on the #menu (#nav in Suckerfish), and then the li's were floated, which seemed to be enough to give reference to the subs since they were direct children of the li's.

    When I first found your old thread, I had tried adding position: relative to the li's (broke my menu because of how I had it set up), and I do remember trying it once on the first-level :hover but at the time it didn't work.

    This part looked a lot cleaner though:
    
    #nav li:hover {
    	position: relative;
    	z-index: 1;
    	}
    
    #nav li:hover ul {width: 10em;} /* moved from hidden list rule */
    
    #nav li:hover ul ul 
    #nav li:hover ul ul ul {left: -999em;}
    
    #nav li:hover ul, #nav li li:hover ul, 
    #nav li li li:hover ul {left: 0;}
    
    Code (markup):
    I'll have to try this on the real page I'm working on... link was near the bottom of my earlier post (personalgppo.html). Setting the haslayout the long way works on that one... I'm going to see if I can swap that for this version ^

    Thx.
     
    Stomme poes, Feb 22, 2008 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Nice. Needed to add back deathshadow's undoing of the floats and padding on child li's for the deathshadowmenu.html and really needed nothing for my other version which has set widths on the li's. Cleaned up version here.

    Damn. HTMLdog should have something on their site for those wanting to use Suckerfish without the Javascript. Out of the box, with the Javascript, IE7 seems to work fine.

    Could be added to the list of reasons not to use display: none... but what about Stu's version with visibility:hidden /visible? He just z-indexes it so high they don't affect the page... I would think that since we wouldn't be changing a display property it should be okay (should be able to set width or position or whatever on the hidden ul).
     
    Stomme poes, Feb 22, 2008 IP
  14. Suzy

    Suzy Peon

    Messages:
    27
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Well that's as maybe :rolleyes: The reason it works with the script is that when it's in place IE7 is using sfhover class and not the :hover pseudo element support, it's the :hover pseudo element support that frequently causes hasLayout display errors to trigger. Remember the "older" bugs like "guillotine" that can be triggered/fixed by rolling over a link which had a background change on the a:hover (though the links were seemingly unconnected to the part of the content that was cutting off)? Well you know those bugs that were fixed.. they weren't really they were just patched they cannot be fixed until hasLayout goes away - IE7 is exposing that slowly and the :hover support on an element other than <a> is making strange things happen because only the conditions for known "bugs" were patched, e.g. Guillotine is alive and well in IE7 :mad: only now it might be a li:hover or a div:hover that triggers it.. there is more to it but hey ho..

    anyway bearing all that in mind and the fact that hasLayout throws us a new curve ball frequently, expecting HTML Dog to cover all of IE's intracacies is possibly a tad realist? (most menus I've seen so far could not be dealt with using a sweeping IE fix) it might be best or easier for them to say just keep the SF script in place .. :eek:

    >>2004
    never left, and have dropped in from time to time, just not had anything to say and since you spoke with me and mentioned my previous posts here, my ears were burning and I thought I would reply in your own thread :)
     
    Suzy, Feb 22, 2008 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    actually, while I was playing with it, I had removed the sfHover from both the javascript (replaced with the word Freaks) and the css entirely... still worked (though got the error on page message at the bottom of IE7.

    As for HTMLdog... your fix is pretty small. Like 4 lines of CSS... and I just saw someone on gary's forums (csscreator) who was also using something like whatever:hover with Suckerfish and was trying to take the Javascript out. I think it's a big enough need... only takes one page for them I think. Plus, it's good for people to be aware... I had no clue about Haslayout on pseudo elements at all!
     
    Stomme poes, Feb 23, 2008 IP
  16. heniv181

    heniv181 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Do anyone know why this script dosent work in IE7 on ASP pages?

    I have tried it out on HTML and ASP pages and it works fine in all browsers, the only combination that dont seem to work is IE7 .ASP

    Edit: (Refering to Deathshadows script)
     
    heniv181, Sep 3, 2008 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    Do you have a live URL of the problem? I would assume that any issue would be from the HTML being incorrect.
     
    deathshadow, Sep 3, 2008 IP
  18. heniv181

    heniv181 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    http://www.nassjograppling.se/dev

    I found the problem. I had not made the correct page declerations for the ASP page.
    
    <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    Code (markup):
    Didn't work.

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    Code (markup):
    Did work though.

    Feel free to edit away these posts. Clearly im playing with things i don't know enough about. =)
     
    heniv181, Sep 3, 2008 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
          <div id="nav">
          	<!-- Infoga horizontell dropdown meny -->
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
     <ul>
    Code (markup):
    That's garbage, but not your problem with IE7 (just pointing it out so you can remove it)

    You already have your sub ul's set to position: absolute, which makes them blocks (and uls are already blocks) so why are you wasting code setting it to display: block again?

    You are not keeping the "trigger" in its own declaration separate from the other hover declarations.

    You are setting position: relative on the li's. Set it on the li:hover instead.
    li:hover {
    position: relative;
    (and z-index for good luck if you had a really deep menu, but not necessary)
    }
    li:hover {
    rest of the styles;
    }

    http://stommepoes.nl/Menus/suckerfishie7.css

    What's with the trend of calling menus "meny"?
     
    Stomme poes, Sep 3, 2008 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #20
    THAT is how you learn. ;)
     
    deathshadow, Sep 3, 2008 IP