?
Solved

hover command not working when using Microsoft Word has HTML editor

Posted on 1999-11-13
17
Medium Priority
?
579 Views
Last Modified: 2013-12-20
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?  
0
Comment
Question by:lchop
  • 7
  • 5
  • 4
  • +1
17 Comments
 

Author Comment

by:lchop
ID: 2205569
Edited text of question.
0
 
LVL 4

Expert Comment

by:CoolAss
ID: 2205683
In IE that should work fine...

In Netscape, that will never work. Netscape doesn't support the HOVER tag.
0
 
LVL 18

Expert Comment

by:bruno
ID: 2206649
can we see the code?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

Author Comment

by:lchop
ID: 2208364
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
 
LVL 18

Expert Comment

by:bruno
ID: 2208691
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
 

Author Comment

by:lchop
ID: 2208861
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
 
LVL 18

Expert Comment

by:mgfranz
ID: 2209063
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
 
LVL 18

Expert Comment

by:bruno
ID: 2209107
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
 
LVL 18

Expert Comment

by:mgfranz
ID: 2209169
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
 

Author Comment

by:lchop
ID: 2209473
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
 
LVL 18

Expert Comment

by:mgfranz
ID: 2209639
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
 
LVL 18

Expert Comment

by:mgfranz
ID: 2209653
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
 

Author Comment

by:lchop
ID: 2209755
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
 
LVL 18

Expert Comment

by:bruno
ID: 2210086
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
 

Author Comment

by:lchop
ID: 2212627
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
 

Author Comment

by:lchop
ID: 2212630
how do I give Bruno the points??
0
 
LVL 18

Accepted Solution

by:
bruno earned 300 total points
ID: 2212825
You accept his posted answer!  And he thanks you kindly!

=o)

bruno
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How do you create a user-centered user experience on your website? And what are some things you should consider in the process?
These seven tips can help you create an extraordinary website, one that captivates audiences and has them wanting to return regularly for more. Keep reading to find out what your site is missing and what you need to add!
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month3 days, 13 hours left to enroll

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question