Welcome to the MacNN Forums.

jherz · Jun 2, 2004, 09:15 PM

In IE, hovering over links on my website turns them light blue and underlines them. For whatever reason, this does not work in Safari. Can anybody take a look at the code and tell me what's going on?

http://www.hzfilms.com

Thanks...

Macola · Jun 2, 2004, 09:48 PM

Originally posted by jherz:
In IE, hovering over links on my website turns them light blue and underlines them. For whatever reason, this does not work in Safari. Can anybody take a look at the code and tell me what's going on?

http://www.hzfilms.com

Thanks...

Hover used to be an IE-specific attribute until other browsers adopted it to varying degrees. At any rate, IE is still very forgiving when it comes to errors in HTML.

You should change your style from:

Code:
color=#666666;

to

color: #666666;

You should also consider using an external style sheet...much easier to maintain.

Oisín · Jun 2, 2004, 10:27 PM

Originally posted by Macola:
Hover used to be an IE-specific attribute until other browsers adopted it to varying degrees.

And now, as irony would have it, IE is far behind in its support of hover... who could have known?

jherz · Jun 2, 2004, 10:54 PM

Originally posted by Macola:
You should change your style from:

Code:
color=#666666; to color: #666666;

You should also consider using an external style sheet...much easier to maintain.

That fixed it. Thanks...

So how would I go about setting up an extrernal style sheet?

Macola · Jun 2, 2004, 10:57 PM

Originally posted by jherz:
That fixed it. Thanks...

So how would I go about setting up an extrernal style sheet?

Just put all your styles in a file, name it something.css, and in the head of all your html files, reference it like this:

Code:
<link rel="stylesheet" href="something.css" type="text/css">

jherz · Jun 2, 2004, 11:10 PM

Originally posted by Macola:
Just put all your styles in a file, name it something.css, and in the head of all your html files, reference it like this:

Code:
<link rel="stylesheet" href="something.css" type="text/css">

I can't seem to get this right. If this is what the CSS is on all of my pages, what should my .css text file look like?

p {
font-family: arial;
font-size: 11px;
}
a:link {
text-decoration: none;
color: #666666;
}
a:visited {
text-decoration: none;
color: #666666;
}
a:hover {
text-decoration: underline;
color: #99CCCC;
}
a:active {
text-decoration: underline;
color: #666666;
}

Stradlater · Jun 2, 2004, 11:22 PM

Originally posted by jherz:
I can't seem to get this right. If this is what the CSS is on all of my pages, what should my .css text file look like?

It should look exactly like what you have below the quotation.

jherz · Jun 2, 2004, 11:31 PM

Originally posted by Stradlater:
It should look exactly like what you have below the quotation.

Okay, I did that, and now it looks ugly as sin. Clearly not working. No idea what I'm doing wrong.

Stradlater · Jun 2, 2004, 11:47 PM

Originally posted by jherz:
Okay, I did that, and now it looks ugly as sin. Clearly not working. No idea what I'm doing wrong.

Are you sure you're <link>ing it in the <head>er?

jherz · Jun 2, 2004, 11:49 PM

Originally posted by Stradlater:
Are you sure you're <link>ing it in the <head>er?

<html>
<head>
<title>HZ Films</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

Stradlater · Jun 3, 2004, 12:04 AM

The news page/frame is looking for the following...

http://www.hzfilms.com/content/news/styles.css

Notice anything?

Other pages will look for the CSS file elsewhere if they're in different directories. In the <link> you might want to include the _whole_ url.

jherz · Jun 3, 2004, 09:22 PM

Originally posted by Stradlater:
The news page/frame is looking for the following...

http://www.hzfilms.com/content/news/styles.css

Notice anything?

Other pages will look for the CSS file elsewhere if they're in different directories. In the <link> you might want to include the _whole_ url.

Figured it out and everything works perfectly now. Thank you so much.