Member Avatar for webwork

I'm a newbie trying to update my old FrontPage 98 rendered web sites and bring them up to date. I've gone through some self-help books and web tutorials and gained enough confidence to buy Expressions4 and started the learning curve, only to find the CSS "hover" is NOT available in IE8. I've found the hover to be very useful in calling attention to links by changing their color.

Any suggestions? I know this can be done with a Java Script, but have even less knowledge of javascripts than CSS. Am I doomed?

  • 2 Contributors
  • 3 Replies
  • 324 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by hielo

Dani AI

Generated

Short answer: you aren’t doomed — IE8 does support hover on normal links. The “hover not available in IE8” message you saw is almost always an editor/validation issue (or a document-mode/DOCTYPE quirk), not a browser bug. was right to point out that link hover works; ’s Notepad++ test shows the same thing: the code runs in the browser, the editor was warning. (See browser support notes.)
MDN :hover · Smashing Magazine: CSS differences in IE6/7/8

What “schema” means in Expression Web: the editor uses an HTML/CSS schema for IntelliSense and validation (Tools → Page Editor Options → Authoring). The CSS Schema and Secondary Schema settings control which CSS features and which IE version the editor treats as “supported.” If the schema is set to an older profile the editor may flag perfectly valid rules for modern IE8. Change the CSS Schema or the Secondary Schema to include IE8/CSS2.1 (or CSS3 draft) and re-check; the status bar also shows the current schema.
Expression Web: Page Editor Options / CSS Schema

Practical troubleshooting checklist

  • Make sure the page has a valid DOCTYPE so IE runs in standards mode (missing DOCTYPE can force quirks/IE5 behavior). Microsoft documents how IE picks document mode.
    How IE chooses document modes
  • Open the page in IE and press F12 to check Browser Mode / Document Mode; force IE8 standards there to confirm behavior.
    F12 Developer Tools reference
  • For very old patterns: ensure anchors you style are real links (an <a> without an href can behave differently in legacy IE), and remember to write link pseudo-classes in LVHA order (:link :visited :hover :active). See docs on pseudo-classes.
    CSS pseudo-classes / LVHA note

If you must support hover on non-link elements in very old IEs, use a tiny JS fallback/polyfill (or attach onmouseover/onmouseout) — but for IE8+ in standards mode, CSS :hover on links is fine. If the editor still warns but the browser shows the correct result, it’s safe to treat the message as an IntelliSense/schema warning rather than a runtime failure.

Recommended Answers

All 3 Replies

Member Avatar for hielo

only to find the CSS "hover" is NOT available in IE8. I've found the hover to be very useful in calling attention to links by changing their color.

Are you sure about that? The code below works fine for me. If anything, the lack of support would be in elements that are NOT links. For example, div:hover is not supported(AFAIK), but links have always been supported (at least since IE6).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
a:hover{background-color:yellow;color:red;}
-->
</style>

</head>
<body>
<a href="#">Hello</a>
</body>
</html>

As for javascript you can use the onmouseover and onmouseout attributes:

<div onmouseover="highlight(this)" onmouseout="highlight(this)">world</div>
<script language="JavaScript" type="text/javascript">
<!--
function highlight(e)
{
  if( e.style.backgroundColor=='yellow')
  {
  	e.style.backgroundColor='white';
	e.style.color='black';
  }
  else
  {
  	e.style.backgroundColor='yellow';
	e.style.color='red';
  }
}
//-->
</script>
Member Avatar for webwork

Thanks so much! It does work now. I'm wondering if there might be a bug in Expression4. When I entered the code via that editor I got the error message - not that the syntax was wrong, but that the hover element was not supported by IE8 "in the current schema". I have much to learn, not the least of which is what the editor means by "schema".

In any case, the hover works now. I tried entering it thru Notepad and Notepad++.

Incidentally, I was ready to give up the fight until I got this timely response. I feel much less alone now, and am anxious to continue, hoping my questions back to this forum don't sound too stupid.

Thanks to hielo for this help, and to Dani for this fine resource.

Member Avatar for hielo

I am not familiar with the editor mentioned so I can't help you with that.

As for the hover problem, there is another workaround:
http://www.xs4all.nl/~peterned/csshover.html

Just thought you might be interested.

Regards,
Hielo

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.