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 14 of 14
  1. #1
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Is there a hack for the IE hover/older IE broswers?

    This is a pure CSS expanding/collapsing vertical menu project I have been tinkering with for about a month now, it works just about perfect in the newer FF and IE though the older IE's do not seem capable of reading down into the hover rules thus failing to expand. I was wondering if there is a way around this problem, (in the meantime I have decided that incorporating JS into it is the best route to go), I now about the unorder list method/suckerfish menu method, though personally it does not really appeal to me, thus I do not care to use it as an alternative.


    Code:
    <HTML><HEAD><TITLE></TITLE><STYLE TYPE="text/css"><!--
    BODY {background-color: #778899;}
    #setup {position: absolute; top: 20px; left: 20px; padding: 0px; margin: 0px; border-color: #B0C4DE; border-style: inset; border-width: 5px;}
    a, .main {white-space: nowrap; display: block; font-family: Arial; font-size: 12px; color: #FFFF00; text-align: center; cursor: pointer; text-decoration: none; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 10px;}
    a:hover {background-color: #B0C4DE; color: #F5F5F5;}
    .main {cursor: default; color: #FFFF00; font-weight: bold;}
    DIV.main:hover {color: #F5F5F5; border-style: inset; border-width: 4px;}
    #show1:hover .sub1, #show2:hover .sub2, #show3:hover .sub3, #show4:hover .sub4 {display: block; color: #F0FFFF;}
    .sub1, .sub2, .sub3, .sub4 {display: none;}
    //--></STYLE></HEAD><BODY><DIV ID="setup";>
    <DIV ID="show1";><DIV CLASS="main";>Main 1</DIV>
    <a CLASS="sub1"; href=""; target="docView";>Sub 1</a>
    <a CLASS="sub1"; href=""; target="docView";>Sub 2</a>
    <a CLASS="sub1"; href=""; target="docView";>Sub 3</a>
    <a CLASS="sub1"; href=""; target="docView";>Sub 4</a>
    <a CLASS="sub1"; href=""; target="docView";>Sub 5</a></DIV>
    <DIV ID="show2";><DIV CLASS="main";>Main 2</DIV>
    <a CLASS="sub2"; href="" target="docView";>Sub 1</a>
    <a CLASS="sub2"; href="" target="docView";>Sub 2</a>
    <a CLASS="sub2"; href="" target="docView";>Sub 3</a>
    <a CLASS="sub2"; href="" target="docView";>Sub 4</a>
    <a CLASS="sub2"; href="" target="docView";>Sub 5</a></DIV>
    <DIV ID="show3";><DIV CLASS="main";>Main 3</DIV>
    <a CLASS="sub3"; href="" target="docView";>Sub 1</a>
    <a CLASS="sub3"; href="" target="docView";>Sub 2</a>
    <a CLASS="sub3"; href="" target="docView";>Sub 3</a>
    <a CLASS="sub3"; href="" target="docView";>Sub 4</a>
    <a CLASS="sub3"; href="" target="docView";>Sub 5</a></DIV>
    <DIV ID="show4";><DIV CLASS="main";>Main 4</DIV>
    <a CLASS="sub4"; href="" target="docView";>Sub 1</a>
    <a CLASS="sub4"; href="" target="docView";>Sub 2</a>
    <a CLASS="sub4"; href="" target="docView";>Sub 3</a>
    <a CLASS="sub4"; href="" target="docView";>Sub 4</a>
    <a CLASS="sub4"; href="" target="docView";>Sub 5</a></DIV>
    </DIV></BODY></HTML>
    * Revised version.
    Last edited by RexxCrow; 08-01-2006 at 12:32 PM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Try validating your HTML. Every semicolon in your document is invalid and "return" and "false" are not valid HTML attributes (and incorrect use of the relevant JavaScript).

    I'm assuming by "newer […] IE" you're referring to IE6. Unless Internet Explorer 5 users are an important target audience, I'd say there's little need to cater to them as most are using IE6 or newer. I believe the newest version of Windows restricted to IE5 is Windows 95; Microsoft officially dropped support for IE on Macintosh.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The newer version of IE that supports hover is IE7. Ther older version that doesn't is IE6. Until everyone upgrades to IE7 a Javascript patch is required to make the menu work on that older version of IE that still has over 50% of the market.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Oh really, I was hoping there was something as I noticed on the older IE I was testing it on (at work) the main button would inset and highlight on hover, it just would not expand, so I was thinking maybe there was some way to work around it, I am not really worried about catering to older browsers for this, but thought in general it would be to know something like that for reference.

    Regarding the return false and use of # in the links I use and semicolons I read in a tutorial that it is always good practice to use those as the semicolon state the end of the command and the # and return false prevents certian browers from causing errors from occuring and also prevents the link from loading in the same window, which is something I do not want to happen with this menu, granted the tutorial was last updated in the late 90's/00's I assume it still holds somewhat true in some ways.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by RexxCrow
    DIV.main:hover {color: #F5F5F5; border-style: inset; border-width: 4px;}
    #show1:hover .sub1, #show2:hover .sub2, #show3:hover .sub3, #show4:hover .sub4 {display: block; color: #F0FFFF;}
    I didn't look at this too closely earlier it seems. The current version of Internet Explorer (6) doesn't support the :hover pseudo-class on anything but anchor (a) elements. Thus you cannot use it on div elements if you want it to work in that browser as you're trying to do with all of the quoted code. Internet Explorer 7 (Beta 3) does support :hover on the other elements though that program is still in a beta testing phase.

    Quote Originally Posted by RexxCrow
    Regarding the return false and use of # in the links I use and semicolons I read in a tutorial that it is always good practice to use those as the semicolon state the end of the command and the # and return false prevents certian browers from causing errors from occuring and also prevents the link from loading in the same window, which is something I do not want to happen with this menu, granted the tutorial was last updated in the late 90's/00's I assume it still holds somewhat true in some ways.
    Either you read the tutorial wrong or the tutorial's wrong.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Would replacing the DIV container with an unstyled/blank anchor serve as a workable replacement then by chance?

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by RexxCrow
    Would replacing the DIV container with an unstyled/blank anchor serve as a workable replacement then by chance?
    Turning an anchor into a block-level element and attaching :hover to that is the usual IE workaround. Example:

    Code:
    CSS:
    #menu a {
      display: block;
      width: 100px;
      height: 30px;
      border: 1px outset gray;
      padding: 3px;
      background: tan;
      color: black;
      }
    #menu a:hover {
      border-style: inset;
      background: black;
      color: red;
      }
    
    X/HTML:
    <ul id="menu">
      <li><a href="item1.html">Menu Item 1</a></li>
      <li><a href="item2.html">Menu Item 2</a></li>
      <li><a href="item3.html">Menu Item 3</a></li>
    </ul>
    Last edited by Arbitrator; 08-01-2006 at 01:07 PM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Alright, that sounds good, I am going to have to test all that out this week, thanks!

  • #9
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Alright, I have managed to considence this down a great deal, it works fine in Firefox, though still does not work in the old IE, I have tried several different methods, (not including using lists), could anybody point out the way around the old IE hover bug, or is using lists the absolute and only way to do this?

    Additionally, I have also made a horizontal version along with the vertical version, they do work much better then my JS version, is just that the JS version works in even the old IE (although just barely) and I can't seem to get around that on my own, darn it!

    I am wanting to get this to work because over all I think it is a much better option for a menu then JS.


    Vertical (stacked) version:

    Code:
    <HTML><HEAD><TITLE></TITLE><STYLE TYPE="text/css"><!--
    BODY{background-color:#778899;}
    #setup{position:absolute;top:20px;left:20px;text-align:center;font-family:Arial;font-size:12px;}
    a,.main{whitespace:no-wrap;display:block;text-decoration:none;color:#F0FFFF;border: 4px outset #B0C4DE;padding:2px 10px;}
    a:hover{background-color:#B0C4DE;color:#F5F5F5;}
    .main{color:#FFFF00;font-weight:bold;}
    DIV.menu:hover .show{display:block;}
    DIV.main:hover{color:#F5F5F5;border:4px inset;}
    .show{display:none;}
    //--></STYLE></HEAD><BODY><DIV ID="setup">
    <DIV CLASS="menu"><DIV CLASS="main">Main 1</DIV><DIV CLASS="show">
    <a href="" target="docView">Sub 1</a>
    <a href="" target="docView">Sub 2</a>
    <a href="" target="docView">Sub 3</a>
    <a href="" target="docView">Sub 4</a>
    <a href="" target="docView">Sub 5</a></DIV></DIV>
    <DIV CLASS="menu"><DIV CLASS="main">Main 2</DIV><DIV CLASS="show">
    <a href="" target="docView">Sub 1</a>
    <a href="" target="docView">Sub 2</a>
    <a href="" target="docView">Sub 3</a>
    <a href="" target="docView">Sub 4</a>
    <a href="" target="docView">Sub 5</a></DIV></DIV>
    <DIV CLASS="menu"><DIV CLASS="main">Main 3</DIV><DIV CLASS="show">
    <a href="" target="docView">Sub 1</a>
    <a href="" target="docView">Sub 2</a>
    <a href="" target="docView">Sub 3</a>
    <a href="" target="docView">Sub 4</a>
    <a href="" target="docView">Sub 5</a></DIV></DIV>
    <DIV CLASS="menu"><DIV CLASS="main">Main 4</DIV><DIV CLASS="show">
    <a href="" target="docView">Sub 1</a>
    <a href="" target="docView">Sub 2</a>
    <a href="" target="docView">Sub 3</a>
    <a href="" target="docView">Sub 4</a>
    <a href="" target="docView">Sub 5</a></DIV></DIV>
    </DIV></BODY></HTML>

    Horizontal (floats out to the right) version:

    Code:
    <HTML><HEAD><TITLE></TITLE><STYLE TYPE="text/css"><!--
    BODY{background-color:#778899;}
    #setup{position:absolute;top:20px;left:20px;text-align:center;font-family:Arial;font-size:12px;}
    a,.main{whitespace:no-wrap;display:block;text-decoration:none;color:#F0FFFF;border: 4px outset #B0C4DE;padding:2px 10px;}
    a:hover{background-color:#B0C4DE;color:#F5F5F5;}
    .main{color:#FFFF00;font-weight:bold;}
    DIV.menu:hover .show{display:block;}
    DIV.main:hover{color:#F5F5F5;border:4px inset;}
    .vert {float: left;}
    .show{display:none;}
    //--></STYLE></HEAD><BODY><DIV ID="setup">
    <DIV CLASS="vert menu"><DIV CLASS="main">Main 1</DIV><DIV CLASS="show">
    <a href="" target="docView">Sub 1</a>
    <a href="" target="docView">Sub 2</a>
    <a href="" target="docView">Sub 3</a>
    <a href="" target="docView">Sub 4</a>
    <a href="" target="docView">Sub 5</a></DIV></DIV>
    <DIV CLASS="vert menu"><DIV CLASS="main">Main 2</DIV><DIV CLASS="show">
    <a href="" target="docView">Sub 1</a>
    <a href="" target="docView">Sub 2</a>
    <a href="" target="docView">Sub 3</a>
    <a href="" target="docView">Sub 4</a>
    <a href="" target="docView">Sub 5</a></DIV></DIV>
    <DIV CLASS="vert menu"><DIV CLASS="main">Main 3</DIV><DIV CLASS="show">
    <a href="" target="docView">Sub 1</a>
    <a href="" target="docView">Sub 2</a>
    <a href="" target="docView">Sub 3</a>
    <a href="" target="docView">Sub 4</a>
    <a href="" target="docView">Sub 5</a></DIV></DIV>
    <DIV CLASS="vert menu"><DIV CLASS="main">Main 4</DIV><DIV CLASS="show">
    <a href="" target="docView">Sub 1</a>
    <a href="" target="docView">Sub 2</a>
    <a href="" target="docView">Sub 3</a>
    <a href="" target="docView">Sub 4</a>
    <a href="" target="docView">Sub 5</a></DIV></DIV>
    </DIV></BODY></HTML>

  • #10
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IE(4 through 6)/Win only natively support :hover on <a> elements.
    Three ways to simulate :hover in IE5-6/Win:
    Dean Edwards' "IE7" patch for IE5-6
    whatever:hover
    http://www.htmldog.com/articles/suckerfish/
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #11
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    After looking through those it seems that using the suckerfish JS requires the least amount of coding, so now new question, how do you set it up? I am not getting how you are suppose ot setup the syntax:

    Code:
    <script language="JavaScript" type="text/JavaScript"><!--
    sfHover=function(){
     var sfEls = document.getElementById("setup").getElementsByTagName("A");
     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);
    I changed the ID and Tag for the same menus as posted above; this is the rule I was trying to create for it, but cant seem to get how I am suppose to
    write it out:

    DIV.menu:hover .show, DIV.menu.sfhover .show{display:block;}

  • #12
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You might be running into trouble with how IE wrongly handles ".class1.class2".

    Why aren't you using <ul>s anyway?
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #13
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    I was really wanting to find a modded way to write them out, I have been thinking why are they really even needed? The a tags should be able to handle that on their own, just a matter of finding out the trick to it, I am not quite at that skill level, though and am just reaching in the dark for the most part. Now this darn idea is driving me crazy, heh!

  • #14
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

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