Welcome to the MacNN Forums.

york28 · Apr 8, 2002, 03:53 PM

Here is what my problems is:
I have a page that has many small images on it. They are all links, and I have a border of 1 set around them. Here is the code I'm using:

<a href="ghost.html"><img src="pics/ghostpre.jpg" width="50" height="38" border="1"></a>

also, the following .css file is linked to in the head of the document:

 BODY, P, TD { font-size: 12px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #CCCCCC;
}

A:link, A:active, A:visited{ text-decoration: none; color: #000000; border-color: #000000;}
A:hover { color: #CCCCCC;}

On IE 5 and Netscaoe 6 on a Mac, this does exactly what I want: creates a thin white border around the link when it is moused over.

But I checked it out on a PC today, with IE 6, and it had the standard link color borders. No mouseover effect at all.

So I was wondering if someone here with more experience than me could give me a hint as to why this is happening. In the past I've always used Freeway or GoLive(ugh), but I just decided to teach myself HTML and CSS because I'm sick and tired of the bloated code WYSIWYG editors produce.

The site can be found at http://jimb.whyareyoulookingatme.com then in the "things to see", use the gallery link.......

I was thinking that I might need to add something to the .css file defining a style for img?

Thanks a lot for the help
Jim B.
york28@mac.com

Thanks for the help. And I apoligize for the gigantic post.

[ 04-08-2002: Message edited by: york28 ]

Simon Mundy · Apr 8, 2002, 05:08 PM

A lot of browsers can be case sensitive. Keep all your CSS the same as your code (generally lowercase is a good thing).

Millennium · Apr 9, 2002, 08:56 AM

You might also want to take the border="1" out of your HTML and move it into the CSS; the fact that you define border width in the HTML might be confusing IE6. The basic code for this is:
<BLOCKQUOTE>code:<HR><pre>a img {
border-width: 1px;
border-style: solid;
border-color: #000;
}[/code]

Also worth noting is that in your CSS, you appear to be setting the color, not the border color, on your links when hovered. To remedy this, here's a code snippet:
<BLOCKQUOTE>code:<HR><pre>a:hover, a img:hover {
color: #CCC;
background-color: #CCC;
}[/code]
(Yes, my color declarations are only three digits. You can do that if the two digits for red, green, and blue are the same for each color, i.e. #ABC is equal to #AABBCC. This is useful if you're going with the MoreCrayons palette).

york28 · Apr 9, 2002, 06:52 PM

Thanks for the suggestions. I'll try this tonight and see if it helps.

Jim B.