Not signed in (Sign In)

Vanilla 1.0.3 is a product of Lussumo. More Information: Documentation, Community Support.

CSS: IE6 JavaScript hack for Suckerfish drowpdowns breaks other CSS

Bottom of Page

1 to 6 of 6

  1.  
    • CommentAuthorcrahe
    • CommentTimeMar 22nd 2007
     
    I recently started a new job with a hospital and I'm trying to completely revamp their website with a modern, standards-compliant model.

    I came up with a design I like at http://www.bremenhospital.org/testsite/ and it basically works in most browsers, but of course IE 6 doesn't handle the menu dropdowns. I implemented the Javascript fix I found on HTML Dog and A List Apart, but it ends up breaking some of the other css -- specifically all the content shifts behind the logo in the top left which is positioned absolutely.

    Can anyone suggest a way to fix this problem? I dont' think we're ready to abandon all IE6 users just yet.

    Thanks!
    • CommentAuthorcrahe
    • CommentTimeMar 22nd 2007
     
    Oh, the css is at www.bremenhospital.org/testsite/style.css.

    Sorry.
    •  
      CommentAuthorTyssen
    • CommentTimeMar 22nd 2007
     
    Can you show us a link to a page with the javascript in that causes this 'breakage' so we can see what the problem is?
    • CommentAuthorcrahe
    • CommentTimeMar 23rd 2007
     
    Well I've been working on it and I've gotten rid of the original problem, but my dropdown menus still don't work in IE6. Can someone take a look at my new version - http://www.bremenhospital.org/testsite/index2.html - and see if they can figure out what I'm missing?

    I've been pulling my hair out on this one.

    Thanks.
    •  
      CommentAuthorTyssen
    • CommentTimeMar 24th 2007
     
    Take this out of your CSS:

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

    and place it inside script tags inside the <head> of your document like so:

    <script type="text/javascript">
    sfHover = function() {
    var sfEls = document.getElementById("navigation").getElementsByTagName("LI");
    for (var i=0; i sfEls[i].omouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].omouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    • CommentAuthorcrahe
    • CommentTimeMar 26th 2007
     
    Thanks!

    I was wondering where that bit of JavaScript went. I only stuck it in the CSS file because I wasn't sure if it would work in the HTML referencing something in a seperate css file.

    I'll give that a whirl.

1 to 6 of 6

  1.