Results 1 to 7 of 7

Thread: Suckerfish dropdown menu not showing on IE

  1. #1
    Join Date
    Jul 2007
    Location
    Beranang
    Posts
    38
    Rep Power
    0

    Question Suckerfish dropdown menu not showing on IE

    On Firefox 3


    On IE6


    My html code
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="default.css" rel="stylesheet" type="text/css">
    
    <style type="text/css">
    <!--
    .style1 {color: #990000}
    .menu {background-color: #aeb;}
    -->
    </style>
    </head>
    <body>
    
    
    <!--menu start-->
    <div class="menu">
    <div id="exampleCont"><ul id="example" class="exampleMenu">
    <li id="link1m"><div class="parent one"><a href="index.html" class="menu-h">Home<span></span></a>
    </div></li>
    
    <li id="link2m"><div class="parent two"><a href="#" class="menu-h">About Us<span></span></a>
    <div class="dropdown"><ul>
    <li><a href="thecompany.html"> >>&nbsp;The Company</a></li>
    <li><a href="contact.html"> >>&nbsp;Contact</a></li>
    <li><a href="#"> >>&nbsp;Press Releases</a></li>
    </ul></div></div></li>
    
    <li id="link2m"><div class="parent three"><a href="products.html" class="menu-h">Products<span></span></a>
    </div></li>
    
    <li id="link2m"><div class="parent four"><a href="#" class="menu-h">Services<span></span></a>
    <div class="dropdown"><ul>
    <li><a href="services.html"> >>&nbsp;Services</a></li>
    <li><a href="case-studies.html"> >>&nbsp;Case Studies</a></li>
    </ul></div></div></li>
    
    <li id="link2m"><div class="parent four"><a href="#" class="menu-h">Careers<span></span></a>
    <div class="dropdown"><ul>
    <li><a href="job-postings.html"> >>&nbsp;Job Postings</a></li>
    <li><a href="internship.html"> >>&nbsp;Internship</a></li>
    </ul></div></div></li>
    
    <li id="link2m"><div class="parent five"><a href="partners.html" class="menu-h">Partners<span></span></a>
    </div></li>
    </ul></div>
    </div>
    <!-- menu finish -->
    
    </body>
    </html>
    My CSS code
    Code:
    ul.exampleMenu li ul li {
      /*width: 118px;*/
      height: auto;
    }
    ul.exampleMenu,
    ul.exampleMenu li,
    ul.exampleMenu li ul,
    ul.exampleMenu li ul li {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    #exampleCont { /* Safari and Netscape 7.0 were having problems 
      with position:relative on #example */
    
      margin: 0px auto;  
      width: 720px;
      height: auto;
    }
    
    ul.exampleMenu {
      width: 720px;
      min-height: 28px;
      height: auto;
    }
    /* \*/
    * html ul.exampleMenu {
      /*height: 28px;*/
    }
    /* */
    
    ul.exampleMenu li {
      float:left;
      /*width: 120px;*/
    }
    li div.parent {
      position: relative;
    }
    
    
    ul.exampleMenu li ul li {
      float:none;
      display:block;
      /*width: 118px;*/
    }
    ul.exampleMenu li a { /* floating this can trigger an IE6 bug */
      text-align: center;
      display: block;
      width: 120px;
      height: 28px;
      line-height: 28px;
      text-decoration: none;
      background-color: #aeb;
      background-position: 0 0;
    }
    
    ul.exampleMenu li ul li a,
    ul.exampleMenu li:hover ul li a,
    ul.exampleMenu li.sfhover ul li a {
      text-align: left;
      width: 100%;
      line-height: 2em;
      height: auto;
      text-indent: 1em;
      background-color: #aeb;
    }
    
    ul.exampleMenu li a:hover,
    ul.exampleMenu li:hover a,
    ul.exampleMenu li.sfhover a,
    ul.exampleMenu li:hover ul li a:hover,
    ul.exampleMenu li.sfhover ul li a:hover {
      background-color: #bfc;
    }
    
    ul.exampleMenu li a span {
      display: block;
      /*width: 120px;
      height: 28px;*/
      cursor: pointer;
      cursor: hand; /* for IE5.x/Win */
      background-position: 0 0;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    ul.exampleMenu li,
    ul.exampleMenu li:hover a span,
    ul.exampleMenu li.sfhover a span {
      /*background-position: 0 -28px;
    the second number should be the negative height of the link. */
    }
    
    /*
       needed to use IDs on the <li>s for IE6 compatibility
    */
    
    ul.exampleMenu li,
    ul.exampleMenu li a,
    ul.exampleMenu li a span {
      /*background-image: url(http://www.dynamicsitesolutions.com/css/link_bg_sprite.png);*/
    }
    ul.exampleMenu li#link2m a,
    ul.exampleMenu li#link2m a span {
      /*background-image: url(quickmenu/images/menu_01.jpg);
      background-position: -120px 0;*/
    }
    ul.exampleMenu li#link2m,
    ul.exampleMenu li#link2m:hover a span,
    ul.exampleMenu li#link2m.sfhover a span {
      /*background-position: -120px -28px;*/
    }
    /*ul.exampleMenu li#link3m a,
    ul.exampleMenu li#link3m a span {
      background-position: -240px 0;
    }
    ul.exampleMenu li#link3m,
    ul.exampleMenu li#link3m:hover a span,
    ul.exampleMenu li#link3m.sfhover a span {
      background-position: -240px -28px;
    }
    ul.exampleMenu li#link4m a,
    ul.exampleMenu li#link4m a span {
      background-position: -360px 0;
    }
    ul.exampleMenu li#link4m,
    ul.exampleMenu li#link4m:hover a span,
    ul.exampleMenu li#link4m.sfhover a span {
      background-position: -360px -28px;
    }*/
    
    ul.exampleMenu li ul li,
    ul.exampleMenu li ul li a {
      background-image: none;
    }
    
    a.menu-h:hover{
    	font-weight: bold;
    
    }
    
    div.dropdown {
      position: absolute;
      top: 28px;
      left: -9000px;
      width: 178px;
    }
    
    ul.exampleMenu li div.dropdown ul {
      width: 118px;
      color: #000;
      background-color: #aeb;
      border: 1px solid #336633;
      margin: 0 30px 30px;
    }
    
    ul.exampleMenu li:hover div.dropdown,
    ul.exampleMenu li.sfhover div.dropdown {
      left: -30px;
    }
    
    ul.exampleMenu li div.dropdown ul li {
      position: relative;
    }
    
    
    /* IE/Win bug fix \*/
    * html div.parent,
    * html ul.exampleMenu li ul,
    * html ul.exampleMenu li ul li a {
      height: 1px;
    }
    * html ul.exampleMenu li ul li {
      margin-left: -16px;
      mar\gin-left: 0;
      height: 1%;
    }
    * html ul.exampleMenu li ul li a {
      width: 100%; /* IE 5.0/win bug fix \*/
    }
    /* end bug fix */
    I wanted it to use only CSS, but...any quick fix?

    *EDIT

    I got it, eventhough there's a bit of a problem with css (the menu not aligned to center), a quick fix would be using javascript (not adhering to my principle but it sort of fixed it)
    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("exampleCont").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>
    ..and also not to forget those width for the menus (li elements), IE couldn't accept such "blasphemous act". lol.
    Last edited by umarzuki; 09-09-2008 at 10:39 AM. Reason: probable solution

  2. #2
    Join Date
    Sep 2005
    Location
    in my body lar...
    Posts
    1,325
    Rep Power
    0
    just add the following coding on top of your html page before the <html> tag.

    <!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" xml:lang="en" lang="en">
    <HTML>
    .... your usual html codes goes here...

  3. #3
    Join Date
    Jul 2007
    Location
    Beranang
    Posts
    38
    Rep Power
    0

    Smile

    Quote Originally Posted by iamfreelancer View Post
    just add the following coding on top of your html page before the <html> tag.
    thanks..that solved the alignment issue.

    But now I got an "extra" white space between banner and suckerfish menu on Firefox 3 and Opera 9. IE not included.

    Last edited by umarzuki; 09-09-2008 at 04:01 PM.

  4. #4
    Join Date
    Sep 2005
    Location
    in my body lar...
    Posts
    1,325
    Rep Power
    0
    Quote Originally Posted by umarzuki View Post
    thanks..that solved the alignment issue.

    But now I got an "extra" white space between banner and suckerfish menu on Firefox 3 and Opera 9. IE not included.

    upload ur problem page into your website and give us the url...
    we can't help much by reading here...

  5. #5
    Join Date
    Jul 2007
    Location
    Beranang
    Posts
    38
    Rep Power
    0

  6. #6
    Join Date
    Sep 2005
    Location
    in my body lar...
    Posts
    1,325
    Rep Power
    0
    Quote Originally Posted by umarzuki View Post
    here you're: http://debmal.com/try/suckerfish.html

    thanks in advance
    Use this simplified HTML for the header and you can reduce loading of the left and right image too.
    <!--main banner start-->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr bgcolor="#00683f" >
    <td height="135" align="center">
    <img src="suckerfish_files/index17.jpg" alt="" width="770" height="135">
    </td>
    </tr>
    </table>
    <!--main banner finish-->

  7. #7
    Join Date
    Jul 2007
    Location
    Beranang
    Posts
    38
    Rep Power
    0
    Thanks a lot mate. That was really helpful!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Need help to settle dropdown menu problems...
    By joeflizo in forum Website Design
    Replies: 2
    Last Post: 08-12-2009, 06:57 AM
  2. Google Maps not showing in Firefox
    By lotmaya in forum Website Programming
    Replies: 2
    Last Post: 10-08-2009, 12:05 AM
  3. Hello all! I'm showing a cool video to everyone
    By iTrance in forum Mamak Stall
    Replies: 2
    Last Post: 30-04-2009, 10:31 AM
  4. Dynamic suckerfish menu
    By umarzuki in forum Website Design
    Replies: 2
    Last Post: 31-12-2008, 08:07 PM
  5. Post count not showing in categories WP
    By iamfreelancer in forum Blogging Discussion
    Replies: 3
    Last Post: 30-10-2007, 10:37 AM

Posting Permissions

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

Search Engine Optimization by vBSEO 3.5.0 RC1 PL1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30