SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Suckerfish Dropdown doesn't work in IE6 and lower

    I am having trouble with a Suckerfish Dropdown menu that I put on one of my sites. The dropdowns seem to work fine in FF and IE7, but in earlier versions of IE, it isn't working. Not sure what the problem is, and wondering if anyone could be of assistance in this matter.

    Here is the page, and here is the css...

    Code:
    * {margin : 0; padding : 0;}
    .left {float : left;}
    .right {float : right;}
    .center {margin : 0 auto; text-align : center;}
    .clear {clear : both;}
    a {color : #000; text-decoration : underline;}
    a:hover, a:focus {text-decoration : none;}
    /* a:visited {color : #000;} */
    a img {border : 0;}
    /* img {margin : 3px;} */
    ul {font-family : Arial, sans-serif; line-height : 1.2em; margin-left : 2.0em;}
    p {color : #000; font-family : Arial, sans-serif;}
    p, blockquote, #content ul {line-height : 1.5em; margin : 1em 0;}
    blockquote {font-family : Arial, sans-serif; font-size : 1.0em; padding-left : 3.0em;}
    #content .subnavbar {margin-left : 0;}
    #content ul {margin-left : 3.0em;}
    p.sub {color : #FF9900; font-size : 0.8em; font-weight : bold;}
    h1 {color : #000; font-family : Arial, sans-serif; font-size : 1.5em; line-height : 2.0em; margin-top : 1.2em;}
    h2 {color : #003979; font-family : Arial, sans-serif; font-size : 1.2em; line-height : 2.0em; margin-top : 0.9em;}
    h2 a {color : #003979; font-family : Arial, sans-serif; font-size : 1.1em; line-height : 2.0em; margin-top : 0.9em;}
    h3 {color : #000; font-style : italic; font-family : Arial, sans-serif; font-size : 1.0em; line-height : 2.0em;}
    html, body {background : url("../pics/background_body.jpg") repeat-y top center;}
    body {behavior : url(hover.htc); font-size : 100%;}
    #wrap {background-color : #FFF; border-left : 1px solid #000; border-right : 1px solid #000; margin : 0 auto; text-align : left; width : 800px;}
    #header {background-color : #7AB9FE; width : 800px; height : 200px;}
    #locations {float : right; list-style : none; margin : 0 80px 0 0;}
    ul.IR li {border-bottom : 1px solid #000; position : relative; font-size : 0.9em;}
    .IR em {display : block; position : absolute; top : 0; left : 0; z-index : 1;}
    /* For IE5.x mac only */
    * html>body .IR {position : static; font-size : 10px;}
    * html>body .IR em  {position : static;}
    .nav {background-color : #7AB9FE; list-style : none; line-height : 1.2em; margin : 0;}
    .nav li {float : left; /* padding-bottom : 1px; */}
    .nav li.home, .nav li.home em {width : 91px; height : 33px;}
    .nav li.yoga, .nav li.yoga em {width : 67px; height : 33px;}
    .nav li.pilates, .nav li.pilates em {width : 79px; height : 33px;}
    .nav li.massage, .nav li.massage em {width : 93px; height : 33px;}
    .nav li.acupuncture, .nav li.acupuncture em {width : 121px; height : 33px;}
    .nav li.workshops, .nav li.workshops em {width : 111px; height : 33px;}
    .nav li.teachertraining, .nav li.teachertraining em {width : 145px; height : 33px;}
    .nav li.about, .nav li.about em {width : 93px; height : 33px;}
    .home em, .yoga em, .pilates em, .massage em, .acupuncture em, .workshops em, .teachertraining em, .about em {background: url("../pics/navbar/navbarlinks.gif") no-repeat; cursor : pointer;}
    .home {left : 0;}
    .home em {background-position : 0 0;}
    .home:hover em {background-position : 0 -33px;}
    .yoga {left : 0;}
    .yoga em {background-position : -91px 0;}
    .yoga:hover em {background-position : -91px -33px;}
    .pilates {left : 0;}
    .pilates em {background-position : -158px 0;}
    .pilates:hover em {background-position : -158px -33px;}
    .massage {left : 0;}
    .massage em {background-position : -237px 0;}
    .massage:hover em {background-position : -237px -33px;}
    .acupuncture {left : 0;}
    .acupuncture em {background-position : -330px 0;}
    .acupuncture:hover em {background-position : -330px -33px;}
    .workshops {left : 0;}
    .workshops em {background-position : -451px 0;}
    .workshops:hover em {background-position : -451px -33px;}
    .teachertraining {left : 0;}
    .teachertraining em {background-position : -562px 0;}
    .teachertraining:hover em {background-position : -562px -33px;}
    .about {left : 0;}
    .about em {background-position : -707px 0;}
    .about:hover em {background-position : -707px -33px;}
    .nav a {display : block;}
    /* The Holly Hack */
    * html .nav a {height : 1%;}
    .nav li ul {position : absolute; z-index : 10; /* show the dropdowns above the images */ top : 33px; /* position the dropdowns a set distance from the top of the image */ left : -999em; list-style : none; border : 1px solid #003979;}
    .nav li:hover ul {position : absolute; left : -31px;}
    .nav li li {border-bottom : 1px solid #003979; clear : both; height : auto; padding-bottom : 0; /* reset the height set on the IR list items */ width : 9.0em;}
    .nav li ul a {background : #7AB9FE; color : #000; padding : 0.25em; text-decoration : none;}
    .nav li ul a:hover {background : #7AB9FE; color : #000; text-decoration : underline;}
    #adbar {background-color : #FFF; clear : both; padding : 20px 0 0 0; width : 800px; min-height : 166px;}
    #adbar ul {list-style : none; margin : 31px 0 0 30px;}
    #adbar ul li {display : inline;}
    #adbar ul li.padright {padding-right : 9px;}
    #content {background : url("../pics/background_content.gif") no-repeat center 100px #FFF; font-size : 0.8em; min-height : 440px; padding : 0 30px 0 30px; width : 740px;}
    #footer {clear : both; font-size : 0.7em; margin : 0 auto; padding : 70px 0 15px 0; text-align : center; width : 800px;}
    #footer p {margin : 0; padding : 0;}
    #footer ul {display : inline; font-family : Arial, sans-serif;}
    #footer li {display : inline;}
    #locations {list-style : none; padding : 30px 0 0 0;}
    #locations td.address {font-size : 0.8em;}
    table.rates {border : 1px solid #8E7853; width : 400px;}
    table.rates th {background-color : #B8A484;}
    table.rates th, table.rates td {padding : 0.5em;}
    .nameplace {text-decoration : none;}
    .subnavbar {background-color : #327ED2; list-style : none; padding : 1.0em; width : 713px;}
    .subnavbar li {display : inline;}
    .vcard {font-family : Arial, sans-serif; font-size : 1.0em; line-height : 1.5em; margin : 1em 0;}

  2. #2
    SitePoint Evangelist bradical1379's Avatar
    Join Date
    Feb 2007
    Posts
    442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to add the javascript for the pseduo classes to work.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, first thing you're doing is using a .htc file. What you have to do to ensure it works is make sure you have the proper MIME type set in your .htaccess file so that IE 6 can use it properly. Have you done that?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bradical1379 View Post
    You need to add the javascript for the pseduo classes to work.
    He's using a .htc file to get around that, so it's unnecessary. Though if he is going to use the .htc file he also has to remove the dynamic class since IE 6 doens't need it (the HTC file covers the :hover on anchors just fine without it).

  5. #5
    SitePoint Evangelist bradical1379's Avatar
    Join Date
    Feb 2007
    Posts
    442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    He's using a .htc file to get around that, so it's unnecessary. Though if he is going to use the .htc file he also has to remove the dynamic class since IE 6 doens't need it (the HTC file covers the :hover on anchors just fine without it).
    I am failing to find the .htc file in his code.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The htc file is referenced from here:

    Code:
    body {behavior : url(hover.htc); font-size : 100%;}
    Which would mean that is should be located at this position:

    http://www.jameswebdevelopment.com/c.../css/hover.htc

    However there is no file there.

    I can confirm that the dropdowns will work IN IE when the htc file is located

  7. #7
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoops, sorry. I went ahead and added it in. Does it work now?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    No, Its not working yet.

    Have you made the necessary adjustments to the mime type to allow htc files to run on your server?

  9. #9
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this information, but I am still not sure how to change the mime type of a file. Any explanation into the steps of how to do this would be great. Thanks!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    There is an article here.

    http://support.microsoft.com/kb/306231

    Or ask your host to do it for you if you have no access etc.

  11. #11
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed the mime-type, but I am still not sure if it is working. I am using Windows Vista, and there still isn't a great way to install IE6 on Vista, so I am kind of in the dark on this one. I am going to try and get to a computer with IE6 on it, but if anyone has time to let me know if it is working on IE6, that would be great!

  12. #12
    SitePoint Enthusiast AnalogPanda's Avatar
    Join Date
    Jun 2006
    Location
    sacramento, ca, usa
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikesBarto2002 View Post
    ...still isn't a great way to install IE6 on Vista
    This works great on XP
    http://tredosoft.com/Multiple_IE

    That page has a link to this:
    http://tredosoft.com/IE6_For_Vista_Part_1
    ...haven't tried it myself, but it might be a place to start (might be something in the comments)

    Also, I just did a google search for "ie6 vista" (without the quotes) and got a lot of interesting results... maybe there is a way after all...

  13. #13
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I finally got Virtual PC downloaded on Vista, and checked it in IE6 and it still doesn't seem to be working. Not sure what the issue is, but if anyone else has any suggestions, I am all ears.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    If we are still talking about the same link then its not working in IE6 and its not working in IE7 either.

    You can fix IE7 by adding this code:

    Code:
    .nav li:hover{visibility:visible}
    You seem to have the htc file in the right place for IE6 but I can't check if you have the right mime type set. I assume you've checked that your server supports htc files etc.

    As a test I have uploaded your menu to my server with your hover.htc and it works fine as can be seen from the link below.

    http://www.pmob.co.uk/temp/testmikeb.htm

    Therefore I am guessing that either you have set the mime type incorrectly (my server didn't need changing) or your server doesn't support it.

    You may have to change to the suckerfish javascript instead.


Bookmarks

Posting Permissions

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