...

View Full Version : Annoying IE6 Sliding Doors Suckerfish Bug problem



echoofali
07-14-2008, 06:34 PM
I for the life of me can't get my menu to work!

I'm hoping someone far More intelligent than me can help!

Basically the menu is breaking/ collapsing in ie6, but fine in other browsers, i think it might have something to do with HasLayout but not sure, if anyone can shed some light on this i'd be very greatful!

HTML:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>
</script>
</head>

<body>


<ul id="nav">
<li><a href="index.php" title="Home" style="color: #00C7B2;" ><span>Home</span></a></li>
<li><a href="brands.php" title="Shop by Brand"><span>Shop by Brand</span></a>
<ul>
<li><a href="brand-details.php?bId=185">Skinceuticals</a></li>
<li><a href="brand-details.php?bId=187">ila-spa</a></li>
<li><a href="brand-details.php?bId=188">Juice Beauty</a></li>
<li><a href="brand-details.php?bId=189">Spiezia</a></li>

<li><a href="brand-details.php?bId=190">Jane Iredale</a></li>
<li><a href="brand-details.php?bId=191">Medik8</a></li>
<li><a href="brand-details.php?bId=192">Skin.ny</a></li>
<li><a href="brand-details.php?bId=194">Fake Bake</a></li>
<li><a href="brand-details.php?bId=195">This Works</a></li>
</ul>
</li>
<li><a href="products.php?catId=25" title="Skincare"><span>Skincare</span></a>
<ul><li><a href="products.php?catId=33" title="Cleansers & Toners">Cleansers & Toners</a></li>

<li><a href="products.php?catId=34" title="Exfoliants & Peels">Exfoliants & Peels</a></li>
<li><a href="products.php?catId=35" title="Eyes and Lips">Eyes and Lips</a></li>
<li><a href="products.php?catId=37" title="Treatments">Treatments</a></li>
<li><a href="products.php?catId=38" title="Suncare & Tanning">Suncare & Tanning</a></li>
<li><a href="products.php?catId=108" title="Kits">Kits</a></li>
<li><a href="products.php?catId=109" title="Moisturise">Moisturise</a></li>
</ul>
</li>
<li><a href="products.php?catId=26" title="Colour"><span>Colour</span></a>

<ul><li><a href="products.php?catId=31" title="Face">Face</a></li>
<li><a href="products.php?catId=32" title="Bronzing / Highlighting">Bronzing / Highlighting</a></li>
<li><a href="products.php?catId=39" title="Cheeks">Cheeks</a></li>
<li><a href="products.php?catId=40" title="Eyes">Eyes</a></li>
<li><a href="products.php?catId=41" title="Lips">Lips</a></li>
<li><a href="products.php?catId=42" title="Beauty tools">Beauty tools</a></li>
</ul>
</li>
<li><a href="products.php?catId=27" title="Bath &amp; Body"><span>Bath &amp; Body</span></a>

<ul><li><a href="products.php?catId=60" title="Bathing">Bathing</a></li>
<li><a href="products.php?catId=61" title="Bodycare">Bodycare</a></li>
<li><a href="products.php?catId=62" title="Relax">Relax</a></li>
</ul>
</li>
<li><a href="products.php?catId=28" title="Mens"><span>Mens</span></a>
<ul><li><a href="products.php?catId=63" title="Skincare">Skincare</a></li>
<li><a href="products.php?catId=64" title="Shaving">Shaving</a></li>
<li><a href="products.php?catId=65" title="Bath and body">Bath and body</a></li>
</ul>
</li>
<li><a href="products.php?catId=29" title="Gifts"><span>Gifts</span></a>

</li>

<div class="clear"></div>

</ul>


</body>
</html>

CSS:


#nav {
height: 30px;
background: url(img/nav-bg.png) repeat-x;
margin-bottom: 20px;
}

#nav li { /* all list items */
display: block;
zoom: 1;
float: left;
background-color: #fff;
}

#nav a {
display: block;
zoom: 1;
color: #AAA38E;
text-transform: uppercase;
background: url(img/nav-tab-right.png) no-repeat top right;
}

#nav span {
display: block;
zoom: 1;
height: 17px;
background: url(img/nav-tab-left.png) no-repeat top left;
padding: 13px 12px 0 12px;
}

#nav a:hover {
color: #00C7B2;
background-position: bottom right;
text-decoration: none;
}

#nav a:hover span {
display: block;
background-position: bottom left;
}

#nav li ul { /* second-level lists */
position: absolute;
z-index: 1;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
width: 190px;
line-height: 18px;
background: url(img/nav-dropdown-bg-bottom.png) no-repeat left bottom;
padding: 0 0 8px 0;
margin: 0;
}

#nav li ul li {
float: none;
background: url(img/nav-dropdown-bg.png) repeat-y left;
padding: 0 1px 0 2px;
}

#nav li ul li a {
display: block;
height: auto;
background: none;
padding: 2px 8px 0 8px;
margin: 0 4px;
}

#nav li ul li a:hover {
color: #fff;
background-color: #00C7B2;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}


the dropdowns are suckerfish stylee, the main problem is the links aren't lining up, the floated <li> are collapsing because the <a> inside them is block level and messing things up, this only happens on IE6!

I'm pulling my hair out, and boss is soon gunna kill me lol!!:eek:

Cheers

abduraooft
07-14-2008, 06:38 PM
Whenever I see some malfunctioning in IE, I'd first validate my code and rectify all markup errors. Use http://validator.w3.org/#validate_by_input to validate your code, and then clear all errors. :)

echoofali
07-15-2008, 12:34 AM
I've give it a validation and fixed the problems, but i'm still getting the same problems, anyone else go any ideas?:confused:



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>
</script>

</head>

<body>


<ul id="nav">
<li><a href="index.php" title="Home" style="color: #00C7B2;" ><span>Home</span></a></li>
<li><a href="brands.php" title="Shop by Brand"><span>Shop by Brand</span></a>
<ul>
<li><a href="brand-details.php?bId=185">Skinceuticals</a></li>
<li><a href="brand-details.php?bId=187">ila-spa</a></li>
<li><a href="brand-details.php?bId=188">Juice Beauty</a></li>
<li><a href="brand-details.php?bId=189">Spiezia</a></li>

<li><a href="brand-details.php?bId=190">Jane Iredale</a></li>
<li><a href="brand-details.php?bId=191">Medik8</a></li>
<li><a href="brand-details.php?bId=192">Skin.ny</a></li>
<li><a href="brand-details.php?bId=194">Fake Bake</a></li>
<li><a href="brand-details.php?bId=195">This Works</a></li>
</ul>
</li>
<li><a href="products.php?catId=25" title="Skincare"><span>Skincare</span></a>
<ul><li><a href="products.php?catId=33" title="Cleansers &amp; Toners">Cleansers &amp; Toners</a></li>

<li><a href="products.php?catId=34" title="Exfoliants &amp; Peels">Exfoliants &amp; Peels</a></li>
<li><a href="products.php?catId=35" title="Eyes and Lips">Eyes and Lips</a></li>
<li><a href="products.php?catId=37" title="Treatments">Treatments</a></li>
<li><a href="products.php?catId=38" title="Suncare &amp; Tanning">Suncare &amp; Tanning</a></li>
<li><a href="products.php?catId=108" title="Kits">Kits</a></li>
<li><a href="products.php?catId=109" title="Moisturise">Moisturise</a></li>
</ul>
</li>
<li><a href="products.php?catId=26" title="Colour"><span>Colour</span></a>

<ul><li><a href="products.php?catId=31" title="Face">Face</a></li>
<li><a href="products.php?catId=32" title="Bronzing / Highlighting">Bronzing / Highlighting</a></li>
<li><a href="products.php?catId=39" title="Cheeks">Cheeks</a></li>
<li><a href="products.php?catId=40" title="Eyes">Eyes</a></li>
<li><a href="products.php?catId=41" title="Lips">Lips</a></li>
<li><a href="products.php?catId=42" title="Beauty tools">Beauty tools</a></li>
</ul>
</li>
<li><a href="products.php?catId=27" title="Bath &amp; Body"><span>Bath &amp; Body</span></a>

<ul><li><a href="products.php?catId=60" title="Bathing">Bathing</a></li>
<li><a href="products.php?catId=61" title="Bodycare">Bodycare</a></li>
<li><a href="products.php?catId=62" title="Relax">Relax</a></li>
</ul>
</li>
<li><a href="products.php?catId=28" title="Mens"><span>Mens</span></a>
<ul><li><a href="products.php?catId=63" title="Skincare">Skincare</a></li>
<li><a href="products.php?catId=64" title="Shaving">Shaving</a></li>
<li><a href="products.php?catId=65" title="Bath and body">Bath and body</a></li>
</ul>
</li>
<li><a href="products.php?catId=29" title="Gifts"><span>Gifts</span></a>

</li>


</ul>


</body>
</html>

abduraooft
07-15-2008, 08:44 AM
Now have a try with

#nav a {
display: block;
float:left;
zoom: 1;
color: #AAA38E;
text-transform: uppercase;
background: url(img/nav-tab-right.png) no-repeat top right;
}

#nav span {
display: block;
float:left;
zoom: 1;
height: 17px;
background: url(img/nav-tab-left.png) no-repeat top left;
padding: 13px 12px 0 12px;
}

echoofali
07-15-2008, 11:36 AM
Hi abduraooft, thanks for your replies, i'm still not having much luck, as floating the <a> and <span> makes the menu look right, but the dropdowns then mess up!

I've tried the following CSS to remedy this



#nav {
position: relative;
overflow: visible;
height: 30px;
background: url(img/nav-bg.png) repeat-x;
margin-bottom: 20px;
}

#nav li { /* all list items */
display: block;
float: left;
background-color: #fff;
}

#nav a {
float: left;
display: block;
color: #AAA38E;
text-transform: uppercase;
background: url(img/nav-tab-right.png) no-repeat top right;
}

#nav span {
float: left;
display: block;
height: 17px;
background: url(img/nav-tab-left.png) no-repeat top left;
padding: 13px 12px 0 12px;
}

#nav a:hover {
color: #00C7B2;
background-position: bottom right;
text-decoration: none;
}

#nav a:hover span {
display: block;
background-position: bottom left;
}

#nav li ul { /* second-level lists */
float: left;
clear: both;
position: absolute;
z-index: 1;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
width: 190px;
line-height: 18px;
background: url(img/nav-dropdown-bg-bottom.png) no-repeat left bottom;
padding: 0 0 8px 0;
margin: 0;
}

#nav li ul li {
float: none;
background: url(img/nav-dropdown-bg.png) repeat-y left;
padding: 0 1px 0 2px;
}

#nav li ul li a {
float: none;
display: block;
height: auto;
background: none;
padding: 2px 8px 0 8px;
margin: 0 4px;
}

#nav li ul li a:hover {
color: #fff;
background-color: #00C7B2;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
top: 30px;
}


this works in FF, and displays correctly in IE6, but now the links and dropdowns fail to work in IE6

Grrrrrr, back to the drawing board!!

Gnowoga
07-15-2008, 11:46 AM
I just managed to line up and fix my own suckerfish dropdown so feel free to compare and draw out a few of the codes and see if you get it working then.

Here's the demo:

http://xpand2.no/tmp/savo/test/

abduraooft
07-15-2008, 12:02 PM
this works in FF, and displays correctly in IE6, but now the links and dropdowns fail to work in IE6

Grrrrrr, back to the drawing board!!
Hiya, try with some more changes

#nav li { /* all list items */
display: block;
zoom: 1;
float: left;
background-color: #fff;
position:relative;

}
#nav li ul li a, #nav li ul li span{
float:none;
}
nav li ul { /* second-level lists */
position: absolute;
z-index: 1;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
width: 190px;
line-height: 18px;
background:url(img/nav-dropdown-bg-bottom.png) no-repeat left bottom;
padding: 0 0 8px 0;
margin: 0;
top:17px;/*or some more */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: 0;
}

echoofali
07-15-2008, 01:06 PM
ah now where geting somewhere!

the menu now works, but it's not got any background images displaying, also when deployed into a page some elements are going over the top of it ie flash.

have you done a quick mockup, to see what i mean, it might be easier for you to tell what i mean?

Cheers for you help so far!

echoofali
07-15-2008, 04:59 PM
Heres the menu isolated:

http://skin2.tri-comm3.co.uk/menu-test.html

and heres the menu in the page:

http://skin2.tri-comm3.co.uk

as you can see the menu is pretty sketchy in IE6 at the moment, it's close to working but not quite their, anyone got any tips to help me polish this off?

echoofali
07-16-2008, 10:53 AM
problem now fixed!!

fiddling around with various z-index values and swapping out the dropdown .png for .jpgs has done the trick, this was giving me a serious headache so thanks to all those who helped :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum