asked on

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:  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?

lchop

ASKER

Edited text of question.

CoolAss

In IE that should work fine...

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

bruno

can we see the code?

lchop

ASKER

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>

</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> </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> </p>

</div>

</body>

</html>

bruno

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>

</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> </p>

</div>

</body>

</html>

lchop

ASKER

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?

Mark Franz

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}

bruno

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

Mark Franz

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>

</style>
</head>

Ichop, if you want to use Brunobear suggestion over mine, please reject my answer.

lchop

ASKER

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?

Mark Franz

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

Mark Franz

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

lchop

ASKER

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.

bruno

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

lchop

ASKER

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!

lchop

ASKER

how do I give Bruno the points??

ASKER CERTIFIED SOLUTION

bruno

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial