Web Design Discussion - Needs Help with Fixing Colors for Links

Print Page | Close Window

Needs Help with Fixing Colors for Links

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Web Design Discussion
Forum Description: Discussion on web design and development subjects.
URL: https://forums.webwiz.net/forum_posts.asp?TID=15503
Printed Date: 28 March 2026 at 11:06pm
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: Needs Help with Fixing Colors for Links

Posted By: Misty
Subject: Needs Help with Fixing Colors for Links
Date Posted: 18 June 2005 at 1:36pm

Please look at both pictures: Calendar and Eternal Life at http://www.mountmoriahbc.org/samplehomepage.asp - http://www.mountmoriahbc.org/samplehomepage.asp . Calendar is linked. Eternal Life is not linked. I am frustrated because I want the border around Calendar to be black. Both are supposed to be linked. I removed the link from Eternal Life to show you what I'm talking about. I would like for the border to be black for both pictures that are linked. How do I do this?

Here's my HTML code for both links:

<a href="calendar.asp"><img src="CalendarLink.jpg" width="160" height="145" border="1" BORDERCOLORDARK="#ffffff" BORDERCOLORLIGHT="#000000"></a></p>
<p><img src="EternalLifeLink.jpg" width="160" height="145" border="1" BORDERCOLORDARK="#ffffff" BORDERCOLORLIGHT="#000000"></p></td>

Replies:

Posted By: dpyers
Date Posted: 18 June 2005 at 3:00pm

You're getting a 1 px blue border around calendar because it's picking up hyperlink color attributes which are overriding the image border.

Try putting the img in a div and applying the borders to the div while using css to turn off borders/decoration for hyperlinks associated with images.

The css would probably look something like
a.image {text-decoration: none; border: none;}

But you might have to go into explicit detail...
a.image:link {text-decoration: none; border: none;}
a.image:visited {text-decoration: none; border: none;}
a.image:hover {text-decoration: none; border: none;}
a.image:active {text-decoration: none; border: none;}

Come to think of it, you could probably forget about using the div and just apply your borders as part of the a.image css.

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

Lead me not into temptation... I know the short cut, follow me.

Posted By: Misty
Date Posted: 20 June 2005 at 2:34am

Unfortunately, this didn't work. Look at http://www.mountmoriahbc.org/samplehomepage.asp - http://www.mountmoriahbc.org/samplehomepage.asp .

My code is:

<STYLE TYPE="text/css">
<!--

a.image:link {color: Black; text-decoration: none; border: none;}
a.image:visited {color: Black; text-decoration: none; border: none;}
a.image:hover {color: Black; text-decoration: none; border: none;}
a.image:active {color: Black; text-decoration: none; border: none;}

-->
</STYLE>

<tr>
    <td height="846" valign="top"> Under Construction. </td>
    <td valign="top"> </td>
    <td valign="top"><p><div><a class=image href="calendar.asp"><img src="CalendarLink.jpg" width="160" height="145" border="1" BORDERCOLORDARK="#ffffff" BORDERCOLORLIGHT="#000000"></a></div></p>
      <p><img src="EternalLifeLink.jpg" width="160" height="145" border="1" BORDERCOLORDARK="#ffffff" BORDERCOLORLIGHT="#000000"></p></td>
</tr>

Posted By: Misty
Date Posted: 20 June 2005 at 7:24pm

Can someone please help me with this?

Posted By: dpyers
Date Posted: 20 June 2005 at 9:20pm

Tested this one if FF, IE, Netscape, and Opera.
Set border to 4xp so I could see it - lol.
Have to specify class="img" in the img tag for x-browser compatibility.

<STYLE type="text/css">
.img {
    padding: 0px;
    margin: 0px;
    border-top: 0px;
    border-left: 0px;
    border-bottom: 4px solid #000000;
    border-right: 4px solid #000000;
}
</STYLE>

    <TD valign=top>
        <a href="mm_files/calendar.asp" >
        <IMG class="img" height=145 src="CalendarLink.jpg" width=160 ></a>
        <P><IMG class="img" height=145 src="EternalLifeLink.jpg" width=160></P>
     </TD>

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

Lead me not into temptation... I know the short cut, follow me.

Posted By: Misty
Date Posted: 20 June 2005 at 10:33pm

Thanks! I noticed that it seems to take a longer time to download the pictures. Is it because of the CSS?

Posted By: dpyers
Date Posted: 21 June 2005 at 9:37am

Seems ro render ok this morning. CSS is pretty fast. Javascript is pretty slow. Might have just been server load.

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

Lead me not into temptation... I know the short cut, follow me.

Posted By: ub3rl337ch3ch
Date Posted: 21 June 2005 at 7:03pm

if i wanted to have different styles for different hyperlinks (say a horizontal row being black and a vertical set being white or something like that), how would i go about doing that? would i just use a.hlink1:link and a.hlink2:link and set the class of the <a> to hlink1 for the 1st on and hlink2 for the second one?

Posted By: dpyers
Date Posted: 23 June 2005 at 4:23am

That's pretty much it.
You could probably also do the horizontal links either within a span or a horizontal list and apply the class to the span/list but I don't recall having any example of that but there are horizontal menu examples around that have different colored links from what the body uses.

The example below was originally done for horizontal div's so I wasn't to fussy with the link css. Just used a default for the black area links and a different one applied to the href of the white area links.

http://www.new2asp.com/wrk/dualdiv/

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

Lead me not into temptation... I know the short cut, follow me.

Posted By: ub3rl337ch3ch
Date Posted: 26 June 2005 at 6:58pm

thanks for the eg.