PDA

Click to See Complete Forum and Search --> : a:hover not working in IE

no/good/at/this
09-29-2008, 01:50 PM
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.
FourCourtJester
09-29-2008, 02:04 PM
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.
no/good/at/this
09-29-2008, 02:13 PM
Ok that poses a new problem i cant as yet write javascript im still learning, can i simply add a style into the html?
FourCourtJester
09-29-2008, 02:21 PM
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.
opifex
09-29-2008, 05:28 PM
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.
David Harrison
09-29-2008, 05:52 PM
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).
opifex
09-29-2008, 06:43 PM
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.
WebJoel
09-29-2008, 09:25 PM
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..)
no/good/at/this
09-30-2008, 10:27 AM
/* 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>
FourCourtJester
09-30-2008, 10:39 AM
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 :D

no/good/at/this, what happens if you swap the a:hover and a:focus around, just like they posted above?
no/good/at/this
09-30-2008, 10:40 AM
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 -->
no/good/at/this
09-30-2008, 10:42 AM
Well i still have a couple things left to try but as the moment nothing is working including all of the above!
no/good/at/this
09-30-2008, 10:48 AM
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.
no/good/at/this
09-30-2008, 10:50 AM
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.
no/good/at/this
09-30-2008, 01:00 PM
So what is a:active for? i can't find it in my css book, and this thread is first of heard of it.
svidgen
09-30-2008, 02:33 PM
:active is for "An a element being clicked on by the user."
no/good/at/this
09-30-2008, 02:49 PM
Thanks, do you have a theory for the above problem?
So far everything that has been suggested is not working.
It works for every other brouser just not IE.
svidgen
09-30-2008, 03:05 PM
Without getting into the specifics of your code too much (because there's a lot of it and it's not tagged as HTML), I noticed you're using a lot of class names. Try one of two things:

put the :hover modifer before the rest of your a.classname definitions
add the classnames to your :hover definitions

So, for option 1, which I can't promise will work, you might get something like this:
a {
/* basic styling for a link */
}
a:hover {
/* basic hover styling for a link */
}
a.class1 {
/* link styling specific to class1 */
}
a.class2 {
/* link styling specific to class2 */
}
For option 2, which is more likely to work, you might get something like this:
a {
/* basic styling for a link */
}
a.class1 {
/* styling specific to class1 */
}
a.class2 {
/* styling specific to class2 */
}
a.class3 {
/* styling specific to class3 */
}
a.class1:hover, a.class2:hover {
/* hover styling for class1 and class2 */
}
a.class3:hover {
/* hover styling for class3 */
}
Adapt something like that for your specific solution. And if it doesn't work, try swapping the classname and :hover before posting back, since I'm not 100% sure what order they go in off the top of my head:
a.class1:hover {
/* i think this is right, but i could be wrong. */
}
a:hover.class1 {
/* i think this is wrong, but i could be wrong. */
}
Does that help?
WebJoel
09-30-2008, 03:47 PM
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 :D

no/good/at/this, what happens if you swap the a:hover and a:focus around, just like they posted above?

The precedence order for pseudo-class is as follows:

a {....}
a:link {....}
a:visited {....}
a:focus, a:hover {....}
a:active {....}

whereby "a" is any anchor that does NOT change (no psuedo-effect applied, ergo the browser picks the default colors for these.)

"a:link" -is any anchor that is part of the pseudo class set (will respond to pointer or TABS events)

"a:visited" -self-explanatory.

"a:focus, a:hover" (or "a:hover, a:focus", the order does not matter) -for 'hovering' with pointer-tool AND for use with non-pointer like TABs hotkeys etc. These share the same Declarations in "{....}"

"a:active" -is the 'mouse-down' hot state.

the precedence order is
a
l
v
f
h
a(ctive)

and disregarding the "a" which is not part of the pseudo-set, think "Lord Vader's Former Handle Anakin"


Makes remembering this correct order, easier. :)
David Harrison
09-30-2008, 03:52 PM
The classes in your CSS overrule the later styles in your focus and hover styles.

A class always overrules a basic selector. An ID always overrules a class selector.

I recommend that you read through this (http://www.htmlgoodies.com/beyond/css/article.php/3629021). Specifically the, "How to Write CSS Selectors" section.
no/good/at/this
09-30-2008, 04:29 PM
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; margin: 0; padding: 0;}
a.mainlink {display: inline-block; width: 140px; height: 22px; font-family: Verdana, "Sans-Serif", Arial, "Lucida Sans Unicode", Courier, "Times New Roman"; font-size: 13px; color: #fff; text-align: center; text-decoration: none; outline-style: groove; background-image: url('fscimages/gradient8.jpg');}
a.visited, a:focus, a:hover, a:active {background-image: url('fscimages/gradient6.jpg'); text-align: right; #fff; }


Above, although ive added the body which you dont really need, is the only way i can get it to work relatively properly, what i mean by that is, its the only way it will work in FF,opera, it kind of works in IE but the background image doesn't change and the outline doesn't show at all, ok kind of works is a stupid thing to say but i cant think of anything else to try.
David harrison, you say my code is cancelling it self out somewhere but where?
Ive tried everything.
no/good/at/this
10-07-2008, 01:26 PM
a:link {display: block; background-image: url('fscimages/gradient6.jpg'); width: 140px; height: 22px; outline-style: groove; font-family: Verdana; color: #fff;}
a:visited {display: block; background-image: url('fscimages/gradient6.jpg'); width: 140px; height: 22px; outline-style: groove; font-family: Verdana; color: #fff;}
a:hover {display: block; background-image: url('fscimages/gradient8.jpg'); width: 140px; height: 22px; outline-style: groove; font-family: Verdana; color: #fff;}
a:focus {display: block; background-image: url('fscimages/gradient6.jpg'); width: 140px; height: 22px; outline-style: groove; font-family: Verdana; color: #fff;}
a:active {display: block; background-image: url('fscimages/gradient8.jpg'); width: 140px; height: 22px; outline-style: groove; font-family: Verdana; color: #fff;}

Hi fellas, i believe to the very best of my knowledge that this is the correct order for this layout in IE, so why is it still not working?
Above i said that the first image was showing but now none of the images show at all, am i loosing the plot or what?
no/good/at/this
10-07-2008, 01:27 PM
<a href="fschomepage.html">Home</a>
<a href="fscgallery.html">Gallery</a>
<a href="fscshop.html">Fsc&nbsp;Shop</a>
<a href="fscregister.html">Register</a>
<a href="fscregister.html">Invite&nbsp;friends</a>
<a href="fsccontactme.html">Contact&nbsp;Me</a>
<a href="fscaddspage.html">Advertise&nbsp;on&nbsp;Fsc</a>
<a href="fscm-uploader.html">Media&nbsp;Uploader</a>
<a href="fsctutorials.html">Tutorials</a>

Apologies here is the html.