...

View Full Version : Image Rollover Issue



katie_lostsoul
07-31-2007, 03:23 PM
Hey guys,

I'm having a problem with my images that are links. When you roll over them they get underlined and I'd like to stop this.

Page: http://tombraiders.net/katie/CEC/index.html

User: letme
pass: in

I'm not sure where I've gone wrong. The CSS for the images is:


img{border: 0px;}

a{outline: none;}

Thanks,
Katie

ronaldb66
07-31-2007, 03:47 PM
How does this rule in style.css look to you:

#column2 a:hover {
border-bottom: 1px solid;
}
It's just doing what you told it to... :D

katie_lostsoul
07-31-2007, 03:52 PM
Ugh:mad: lol. How can I have it not affect the images but still the normal links then?:confused:

ronaldb66
07-31-2007, 04:05 PM
Instead of a border you could toggle the underline on hover; this is a text property and does not apply to images.
Alternatively, you could give the image links a separate class with a dedicated rule to turn the border off.

katie_lostsoul
07-31-2007, 04:10 PM
I got rid of those two lines and put this but it still doesn't work...


.img {
border: 0;
}
.img:link {
border: 0;
}

.img:hover {
border:0;
}

.img:visited {
border:0;
}

.img:active {
border:0;
}

BWiz
07-31-2007, 05:03 PM
On you're style.css, you have the following code:



#column2 a:hover {
border-bottom: 1px solid;
}

Try changing it to:



#column2 a:hover {
text-decoration: underline;
}

katie_lostsoul
07-31-2007, 05:30 PM
Beautiful! It works! :D Now I just have to fix it for "column1"...but I'm not sure where to put it...

katie_lostsoul
07-31-2007, 05:37 PM
Actually, that's not what I want. Now links aren't getting the double underline that I put on it. I want the images *only* to not have the double underline.

Can this be done?

ahallicks
07-31-2007, 06:15 PM
Try:

#column2 img a:hover {
border: none;
}

katie_lostsoul
08-01-2007, 03:54 PM
Unfortunately that doesn't work :(

VIPStephan
08-01-2007, 04:20 PM
Of course it doesn’t because it is saying: “Set the border width for links inside images within column2 to zero.” which doesn’t make sense. The only CSS way to specifically address images in links is to assign a class to the links that contain the images and apply that style to that class.

katie_lostsoul
08-01-2007, 04:24 PM
Where can I find the correct code for this?

BWiz
08-01-2007, 04:31 PM
<style type="text/css">
a { text-decoration: none; padding-bottom: 1px; }
a:hover { border-bottom: 1px solid #000; text-decoration: underline; }
a.imgLink:hover { border-bottom: 0; text-decoration: none; }
/* Example:
<a href="index.php?id=11" class="imgLink"><img src="images/linktohome.php" alt="Homepage" /></a>
*/
</style>
Try this (just apply it)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum