Hyperlinks: CSS Pseudo Selectors and Hyperlinked Images and Other Non-Textual Content

[jd65]

Help!

I'm trying to define textual hyperlinks for a footer. I also have images in my footer that are also hyperlinked.

The CSS I'm using is:

#footer a:link    { text-decoration: underline; color: #F8F8F7; font-weight: 600; padding: 2px; }
#footer a:visited { text-decoration: underline; color: #F8F8F7; font-weight: 600; padding: 2px; }
#footer a:hover   { text-decoration: none;      color: #fff;    font-weight: 600; padding: 2px; [COLOR=#CC0000]background-color: #blue;[/color] }
#footer a:active  { text-decoration: underline; color: #F8F8F7; font-weight: 600; padding: 2px; }

The problem is that in my HTML, within my footer, I also have images that are hyperlinked. For example,

<a href="[URL unfurl="true"]http://mywebsite.com"><img[/URL] src="[URL unfurl="true"]http://mywebsite.com/image/picture.png"[/URL] [COLOR=#CC0000]style="margin: 20px 0;"[/color]></a>

Now, because my image above has a top & bottom margin of 20px, my hyperlinked image shows an unsightly blue background when I hover my mouse over it. How can I stop this from happening? I don't want any linking effect on my images - just only my textual content. Help!

Thanks in advance,
JD.

 

[maharg]

Hi JD

Try adding border="0" in the image tag, thus <img src="

http://mywebsite.com/image/picture.png"

style="margin: 20px 0;" border="0">

Regards
Graham

 

[vacunita]

Try adding border="0" in the image tag, thus <img src="

http://mywebsite.com/image/picture.png"

style="margin: 20px 0;" border="0">

how is a border going to stop the background?


Anyway,

Your CSS applies to any links inside your footer element.

If you don't want it applying to other links, then specify which links you do want it applied to by giving them a class:

<a href="..." class="linkstogetcss">

 ----

#footer a[red].linkstogetcss[/red]:link    { ... }
#footer a[red].linkstogetcss[/red]:visited { ... }
#footer a[red].linkstogetcss[/red]:hover   { ... }
#footer a[red].linkstogetcss[/red]:active  { ... }

That way your css will only apply to links with that particular class.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[jd65]

That works! Thank you so much for helping a poor sap out. Btw, I discovered that the missing attribute, in my initial comment, was background: none;. Regardless, Phil's solution is more graceful.

Thanks again!

Best,
Dipesh.