Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Annoying IE6 Sliding Doors Suckerfish Bug problem

    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:

    Code:
    <!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:
    Code:
    #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!!

    Cheers

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    Last edited by abduraooft; 07-15-2008 at 07:39 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've give it a validation and fixed the problems, but i'm still getting the same problems, anyone else go any ideas?


    Code:
    <!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>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Now have a try with
    Code:
    #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;
    	  }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    #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!!

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    Code:
    #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;
    	  }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #9
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #10
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •