www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: a:hover not working in IE

  1. #1
    Join Date
    Jul 2008
    Posts
    168

    a:hover not working in IE

    a:hover {background: url('fscimages/gradient6.jpg'); font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #000; outline-style: groove;}
    Can anyone please tell me why the outline is missing completely and the background doesn't appear on mouse hover?
    And what i can use instead, as i dont know how to write fixes for the most irritating browser thats is IE.

  2. #2
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    Last i checked, IE6 didn't support a:hover pseudo tag. I'm not sure if IE7 does either.

    The workaround is to add a onmouseover="ChangeStyle()" to your element, where ChangeStyle() is a javascript function that modifies your style elements.
    Web Jesters - The Masters of Multitasking.

  3. #3
    Join Date
    Jul 2008
    Posts
    168
    Ok that poses a new problem i cant as yet write javascript im still learning, can i simply add a style into the html?

  4. #4
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    you can keep the a:hover there for other browsers, but try adding this into your page for IE:

    <script type="text/javascript">
    function ChangeStyle(e)
    {
    e.style.backgroundImage="url(fscimages/gradient6.jpg)"
    e.style.fontFamily = "Verdana, helvecia, 'Sans Serif', Arial, Times New Roman, Lucida Sans Unicode";
    e.style.fontSize = "13px";
    e.style.color = "#000";
    e.style.outlineStyle = "groove";
    }
    </script>

    and on the link element, add a onmouseover="ChangeStyle(this)" to your line.

    That should do it.
    Web Jesters - The Masters of Multitasking.

  5. #5
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    ie6 does support link pseudo classes.
    it WILL fail if the order of the pseudo classes is not as follows:

    1. a:link
    2. a:visited
    3. a:hover
    4. a:active

    specifically- a:active MUST follow a:hover... if a:active is listed first a:hover will fail.

  6. #6
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    FourCourtJester, IE does support a:hover, it has done since at least IE5, I think also IE4, but I'm not sure.

    opifex, the order can be specified however you like, but yes that is the advised order so that there are no weird behaviours (in all browsers, not just IE). For example, placing :link after :hover will over-rule :hover. Placing :active at the end allows it to over-rule everything else, but it will not prevent :hover from firing if it is placed before it.

    In fact the full recommended order is:
    1. a:link
    2. a:visited
    3. a:focus
    4. a:hover
    5. a:active

    And whenever a:hover is used, a:focus should also be used. Focus is for people who tab through the links with a keyboard, it shows the currently selected link, which can be activated with the enter key.

    no/good/at/this, I suspect that the reason your code doesn't work is because later on you overrule the a:hover with something else. It would be useful if you could either link to, or preferably, upload your project (CSS, HTML and any relevant images).
    Last edited by David Harrison; 09-29-2008 at 05:55 PM.
    Every fight is a food fight when you’re a cannibal.

  7. #7
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    if i remember correctly lte ie6 will stall on a:focus, so I didn't include it.
    the one "problem" that ie6 has with the link pseudo class (and any other pseudo class) is that you MUST declare the first link in the chain to make sure everything works.
    i.e., declare the parent before declaring the child!
    if a and a:link are not declared it is more than likely that what follows will not render.
    ...but stupidity is terminal.

  8. #8
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    a:hover {background: url('fscimages/gradient6.jpg');
    If this has not been solved, I have a spin on it...

    This (above) is written 'shorthand'. Since ONLY the "background image" is being used for Declaration, the Declaration should say
    a:hover {background-image:url();}
    It is when you add a 'color:value;' or 'style', 'position', 'z-index', -any additional background declaration/value can you drop the "-background" part of the Selector (because "z-index", "position", "etc" is not "image" but pertaining to it's Selector whichin this case, is "a:hover", etc.....

    My IE-based HTML-editor is notorious making this 'not work' even though it 'works' in IE7 (I no longer have IE6 so, cannot verify/text this theory...)

    If this request has not been solved, try adding "-image" to "background" and let us know.

    Also yes, "a:hover" and "a:focus" are the same values, always. You combine them, like this:

    a:hover, a:focus {delcaration:value;....}

    That way, a pointer-tool on-hover AND using TABs or hotkeys, get the SAME results. Handicapped persons might not be using a 'mouse', they might be using a laser-pointer or touch-tab or 'touch-keys', etc. not to mention hand-held devices (no 'mouse' there, either..)
    Last edited by WebJoel; 09-29-2008 at 09:33 PM.
    I build for: Firefox and tweak for IE

  9. #9
    Join Date
    Jul 2008
    Posts
    168
    /* fourseasonscarperstylesheet */

    /* styles for loose body and images */
    body { background: #000066 url('fscimages/gradient7.png') repeat-x; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 12px; text-decoration: none;}

    /* styles for anchor links */
    /* firstnav list items */
    a.home {margin-top: 150px; margin-left: 80px; display: block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.gallery {margin-top: 10px; margin-left: 80px; display: block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.shop {margin-top: 10px; margin-left: 80px; display: block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.register {margin-top: 10px; margin-left: 80px; display: block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.invite {margin-top: 10px; margin-left: 80px; display: block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.contact {margin-top: 10px; margin-left: 80px; display: block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.adds {margin-top: 10px; margin-left: 80px; display: block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.media {margin-top: 10px; margin-left: 80px; display: block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.tutorials {margin-top: 10px; margin-left: 80px; display: block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}

    /* second nav */
    a.rigmaking {margin: 0 0 0 0; display: inline-block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.baitguide {display: inline-block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.baitmaking {display: inline-block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a.tackle {display: inline-block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
    a:hover, a:focus{background-image: url('fscimages/gradient6.jpg'); font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; outline-style: groove; text-align: right;}

    This is the css that is relevant, actually this is all i have at the mo everything else i deleted to start over.
    Also the file uploader for the images wont let me upload the other image for some reason but its basically the same image flipped 180 degrees.

    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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="maindraft.css"/>
    <title>four seasons carper</title>
    </head>
    <body>
    <!-- anchors displayed as block -->
    <a class="home" href="fschomepage.html">Home</a>
    <a class="gallery" href="fscgallery.html">Gallery</a>
    <a class="shop" href="fscshop.html">Fsc&nbsp;Shop</a>
    <a class="register" href="fscregister.html">Register</a>
    <a class="invite" href="fscregister.html">Invite&nbsp;friends</a>
    <a class="contact" href="fsccontactme.html">Contact&nbsp;Me</a>
    <a class="adds" href="fscaddspage.html">Advertise&nbsp;on&nbsp;Fsc</a>
    <a class="media" href="fscm-uploader.html">Media&nbsp;Uploader</a>
    <a class="tutorials" href="fsc_totorials.html">Tutorials</a><
    <!-- block end -->
    </body>
    </html>
    Attached Images Attached Images

  10. #10
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    I must of never used the a:hover stuff in proper order, since it never worked for me back in the day. Always good to learn something new every day

    no/good/at/this, what happens if you swap the a:hover and a:focus around, just like they posted above?
    Web Jesters - The Masters of Multitasking.

  11. #11
    Join Date
    Jul 2008
    Posts
    168
    Sorry here is the html from the /* second nav */ although you dont really need it.
    <!-- anchors displayed as inline-block -->
    <a class="rigmaking" href="fscrigmaking.html">Rig&nbsp;making</a>
    <a class="baitguide" href="fscbaitguide.html">Bait&nbsp;guide</a>
    <a class="baitmaking" href="baitmaking.html">Bait&nbsp;making</a>
    <a class="tackle" href="tackleguide.html">Tackle&nbsp;guide</a>
    <!-- inline-block end -->

  12. #12
    Join Date
    Jul 2008
    Posts
    168
    Well i still have a couple things left to try but as the moment nothing is working including all of the above!

  13. #13
    Join Date
    Jul 2008
    Posts
    168
    Guys im really sorry ive sussed it out, cant believe i didnt see it before. i missed out repeat-x from the declaration, now ive put it in it works finr although, the outline is still not visible!
    Again sorry guys im a total pratt, but some help with the outline would be great.......
    Sorry.

  14. #14
    Join Date
    Jul 2008
    Posts
    168
    Actually i havn't sussed it its still not working, well not properly any way, its not showing the new image its just keeping the original.

  15. #15
    Join Date
    Jul 2008
    Posts
    168
    So what is a:active for? i can't find it in my css book, and this thread is first of heard of it.

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles