Suckerfish in ie6 problem

Discussion in 'CSS' started by Pinoguin, Aug 1, 2008.

0
  1. #1
    Hi,

    Can someone please check if this is working in your ie6?
    http://pinoguin.info/hovertest.html

    I just did and somehow it doesn't work.. even if I added the js sfhover from htmldog .. strange that it used to work for me before.. I must've added some code that ie6 doesn't like. Help please?
     
    Pinoguin, Aug 1, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    My advice - don't use suckerfish. I've never been able to get it to work right - or at least what I'd consider right in testing... I know a lot of people use it for development, but it's just too much markup for such a simple problem. I guess that's really my big problem with it... too many classes, too many wrappers, too much markup.

    You might also be being bit by an odd render bug in IE where it won't redraw a change of an elements position from offscreen to onscreen unless it's 'display' state changes. I'm also questioning the need for those wrapping div's - though without the full code you are working with it's hard to say if they are needed or not. (99% of the time one wrapper on a menu is unneeded, two is just plain silly)

    My approach is to just write a flat CSS menu, then throw peterned's csshover2.htc at it in legacy IE to make it work.
    http://www.xs4all.nl/~peterned/csshover.html
    (real shame such a great behavior file is on such a rubbish website)

    This oversimplifies, but should be close enough for you to work from:
    <!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=utf-8"
/>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

* html body {
	behavior:url(csshover2.htc);
}

#subMenu,
#subMenu ul {
	list-style:none;
	font:normal 100%/140% arial,helvetica,sans-serif;
}

#subMenu {
	margin:0.5em;
}

#subMenu li {
	float:left;
	height:1.4em;
	position:relative;
}

#subMenu ul {
	position:absolute;
	/*
		IE will often refuse to redraw unless the display state changes,
		so while we position it offscreen we'll make it inline - which the
		absolute positioning will override by the spec. On the hover we
		change it to block, and IE will draw it.
	*/
	display:inline;
	top:1.4em;
	left:-1000em;
}

#subMenu a {
	padding:0 0.25em;
}

#subMenu li:active ul,
#subMenu li:hover ul {
	left:0;
	/* see #subMenu ul to explain the next attribute setting */
	display:block;
}

#subMenu ul li {
	float:none;
}

</style>

<title>
	Test
</title>

</head><body>

<ul id="subMenu">
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li>
		<a href="#">link</a>
		<ul>
			<li><a href="#">link</a></li>
			<li><a href="#">link</a></li>
		</ul>
	</li>
	<li>
		<a href="#">link</a>
		<ul>
			<li><a href="#">link</a></li>
			<li><a href="#">link</a></li>
		</ul>
	</li>
</ul>

</body></html>
    Code (markup):
    Again, requires csshover2.htc from peterned to work.
    http://www.xs4all.nl/~peterned/htc/csshover2.htc

    Which while a bit large for a javascript, has the advantage that only IE users who need it are going to get sent it, saving you bandwidth - AND it keeps the code clean for all recent browsers that support :hover properly... The latter being the real reason I consider suckerfish a waste of time.
     
    deathshadow, Aug 1, 2008 IP
  3. Pinoguin

    Pinoguin Peon

    Messages:
    848
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The reason I chose suckerfish is that it's more seo-friendly than my other option which is built from the cms I'm using, and those extra divs are of course part of a bigger set of menus.

    Thanks for the info there, I may just try that out. Looks easier to use too.
     
    Pinoguin, Aug 1, 2008 IP