hover command not working when using Microsoft Word has HTML editor

I have been using Microsoft Word 2000 to author my Web pages.  Usually it successfully allows me to add HTML code for commands that it doesn't do automatically.  However, I'm having problems doing so with the "hover" command, which makes a hyper-link change color when the mouse pointer goes over it.  The command I'm using is: <!--
A:HOVER {color: #FF0000;} --> inserted within the "style" tags.

To make sure I was using the correct code, I tried it in front page express and it worked.  Every hyper-link I added to the page gave the desired effect.  I then opened the page with Microsoft Word, added another hyper-link and saved it.  When I opened the page in my browser again, the new link did not have the effect, while the initial ones still did.  However, the HTML code created by Microsoft Word for the hyper-link's was exactly the same as the code for the other hyper-link's. In addition, the hover command code remained intact. I don't understand why they aren't acting the same way in the browser.

Can someone explain why this is happening and what I can do to fix it?  
lchopAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lchopAuthor Commented:
Edited text of question.
0
CoolAssCommented:
In IE that should work fine...

In Netscape, that will never work. Netscape doesn't support the HOVER tag.
0
brunoCommented:
can we see the code?
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

lchopAuthor Commented:
here is the full code of the page I was experimenting with.  The first and last hyper-link I inserted using front page express and they do in fact change color when the mouse passes over them.  The middle 2 links I inserted using Microsoft Word 2000 and they do not change color.  I can't see why they would be acting differently.  Thanks.
----------------------------------------

<html>

<head>
<meta name=Generator content="Microsoft Office HTML Filter 2.0">
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta name=Originator content="Microsoft Word 9">
<title>http:</title>
<style>
<!--
A:HOVER {color: #FF0000;}
p.MsoNormal, li.MsoNormal, div.MsoNormal
      {
      margin:0in;
      margin-bottom:.0001pt;
      font-size:12.0pt;
      font-family:"Times New Roman";}
a:link, span.MsoHyperlink
      {color:aqua;
      text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
      {color:aqua;
      text-decoration:underline;}
p
      {margin-right:0in;
      margin-left:0in;
      font-size:12.0pt;
      font-family:"Times New Roman";}
-->
</style>
</head>

<body bgcolor=teal lang=EN-US link=aqua vlink=aqua
alink="#00FFFF">

<div class=Section1>

<p><a href="http://aol.com">http://aol.com</a></p>

<p>&nbsp;</p>

<p><a href="http://cnnsi.com/football/nfl/matchups/index.html">http://cnnsi.com/football/nfl/matchups/index.html</a></p>

<p><a href="http://espn.com">http://espn.com</a></p>

<p><a href="http://msn.com">http://msn.com</a></p>

<p>&nbsp;</p>

</div>

</body>

</html>
0
brunoCommented:
What browser are you using to test the page?  When i tested this code, all 4 links changed to red on hover!  

on another point....your stylesheet looks like it is much more confusing than it needs to be.  but A:hover worked fine.

try copy and pasting this code just to see if it works for you...



----------------------------



<html>

<head>

<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">

<title>http:</title>
<style>
<!--
A:link { color: #00FFFF }
A:active { color: #00FFFF }
A:visited { color: #00FFFF }
A:HOVER {color: #FF0000;}
p.MsoNormal, li.MsoNormal, div.MsoNormal
{ margin:0in; margin-bottom:.0001pt; font-size:12.0pt; font-family:"Times New Roman";}
a:link {color:aqua; text-decoration:underline;}
a:visited {color:aqua; text-decoration:underline;}
p {margin-right:0in; margin-left:0in; font-size:12.0pt; font-family:"Times New Roman";}
-->
</style>
</head>

<body bgcolor="teal" lang="EN-US">

<div>

<p><a href="http://aol.com">http://aol.com</a></p>

<p><a href="http://cnnsi.com/football/nfl/matchups/index.html">http://cnnsi.com/football/nfl/matchups/index.html</a></p>

<p><a href="http://espn.com">http://espn.com</a></p>

<p><a href="http://msn.com">http://msn.com</a></p>

<p>&nbsp;</p>

</div>

</body>

</html>
0
lchopAuthor Commented:
ok, I feel really stupid.  I think I just figured out what the problem is.  The links I inserted with Microsoft Word just so happen to be sites I have recently visited, while the others are sites I have not visited recently.  So I guess the visited link format is overriding the hover command.  How can I fix that?
0
mgfranzCommented:
Take the link references out of the <body> tag, keep them in the <style> reference only like Brunobear suggested.  Here is what I use in my sytle sheets;

body {margin:2;
        background-color:white;
        }
A {text-decoration: none; }
A:link {color: black}  
A:visited {color: black}  
A:active {color: black}
A:hover {color: red}
A:status {false}
0
brunoCommented:
mgfranz,

if you are suggesting that Ichop use my suggestion, why did you post an answer?


Ichop,

The visited link format should not override the hover command.  However, by placing all the link coding into your stylesheet, that shouldn't be an issue at all.

Good luck!

BRUNO
0
mgfranzCommented:
Only because of the way you detailed your style sheet tage, just a couple of repeat styles...  Either way, the style sheet will overwrite the alink and vlink in the body tag.

Here is what I found works fine;

<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>http:</title>
<style>
<!--
A:link { color: #00FFFF }
A:active { color: #00FFFF }
A:visited { color: #00FFFF }
A:HOVER {color: #FF0000;}
p {margin-right:0in; margin-left:0in; font-size:12.0pt; font-family:"Times New Roman";}
-->
</style>
</head>

Ichop, if you want to use Brunobear suggestion over mine, please reject my answer.
0
lchopAuthor Commented:
I think the problem is that the hover command has to be after the visited link color command, not before.  when I copied everything into notepad, and rearranged the order, it worked.  The problem I have, however is that when I insert the hover command after the other link commands,Microsoft Word is moving it to the top of the style section when I save the page.  Do you know anything that would prevent this from happening?
0
mgfranzCommented:
Yup, save the Style sheet to a external file, like style.css and call this page using a <link> command;

<head>
<LINK REL=STYLESHEET HREF="../css/iestyle.css" TYPE="text/css">
</head>

This way you only have to change the .css file when you want to update every page in your site.

Mark
 
0
mgfranzCommented:
And, don't use Word as your HTML editor.  While it shouldn't matter which psuedo-class is loaded first, I tried it and you are right.  If the hover is before the visited class, it doesn't work.  These are CSS2 psuedo-elements and there is sure to be a few bugs in the convention.

Mark
0
lchopAuthor Commented:
so you are putting the iestyle.css file in a directory named css?

The reason I use Microsoft Word to author my Web pages is because it's easy to cut and paste tables etc. from Microsoft applications and they hold their exact formatting.  It's also WYSIWYG and I have very limited knowledge of HTML.  Can you recommend another editor that has these features?  I was thinking about trying front page 2000 but when I cut and paste tables from Word or Excel into front page express, I lose the formatting.
0
brunoCommented:
I don't know if either one will be able to keep formatting, but the two best WYSIWYG editors out there right now are Front Page 2000 and Dreamweaver 2.  HTML is fairly easy to pick up (at least the basics), if you feel like going that route i recommend Allaire Homesite 4.0.

BRUNO
0
lchopAuthor Commented:
only rejecting because the other expert answered first and both of you pretty much gave a lot of the same information.  I don't want to start any wars!
0
lchopAuthor Commented:
how do I give Bruno the points??
0
brunoCommented:
You accept his posted answer!  And he thanks you kindly!

=o)

bruno
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.