Making a:hover img NOT underline Options

[SeanWoods]

I was told before that to stop my images from being underlined on Firefox when hovering, I need to make it a background image. How exactly is that done? I don't know if it makes it more complicated, but I also have a rollover image. They are the links along the left hand side. http://www.grammarperfection.com/index.html

CSS Code:

CODE

a:hover img {
    text-decoration: none;
}

There are several image links, but they all have about the same code:

HTML Code:

CODE

<h5><a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home Rollover','','../Images/home_rollover.jpg',1)"><img src="../Images/grammar-perfection-home-icon.jpg" name="Home Rollover" width="50" height="50" border="0" id="Home Rollover" /><br />
          Home</a></h5>

[pandy]

I guess you still want the text underlined? You can fake it.

CODE

a              { text-decoration: none }
a:hover span   { border-bottom: 1px solid blue}

HTML

<a href="http://google.com"><img src="http://www.grammarperfection.com/Images/home_rollover.jpg"> <span>Google</span></a>

You may need some trick to make IE6 and lower display the border on an inline element, but I wouldn't bother since it isn't a deal-breaker.

[Christian J]

I was told before that to stop my images from being underlined on Firefox when hovering, I need to make it a background image.

Normally it should be enough to remove the IMG's border. But since your links also contain text you must do more, e.g. remove the "text-decoration: underline" from the A element as well. For more ideas, see http://archivist.incutio.com/viewlist/css-discuss/81598

How exactly is that done?

By giving the link a non-tiling background-image? Also provide some padding so the link text doesn't cover the BG image.

[SeanWoods]

I guess you still want the text underlined? You can fake it.

CODE

a              { text-decoration: none }
a:hover span   { border-bottom: 1px solid blue}

HTML

<a href="http://google.com"><img src="http://www.grammarperfection.com/Images/home_rollover.jpg"> <span>Google</span></a>

You may need some trick to make IE6 and lower display the border on an inline element, but I wouldn't bother since it isn't a deal-breaker.

Thanks for the idea. How can I get all the in-line links to show the underline when hovering? Do I need to put <span>Link</span> around each one?

Is what I am doing with what you told me, turning off all hover underlines unless there is a span around it?

Here is what I originally had.

CODE

a:hover {
    font-weight: normal;
    text-decoration: underline;

}

Just-in-case, here is everything.

CODE

a img {
    border:none;
        
}
a:hover img {
    text-decoration: none;
}
a:link {
    text-decoration: none;
    font-weight: normal;
}
a:visited {
    text-decoration: none;
    font-weight: normal;
}

a:hover {
    font-weight: normal;
    text-decoration: underline;

}
a:active {
    text-decoration: none;
}
a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 5px;
}

By the way, do you like my colors better now? I took out all the gray and went with a blue theme.

[pandy]

Thanks for the idea. How can I get all the in-line links to show the underline when hovering? Do I need to put <span>Link</span> around each one?

Alas, yes.

Is what I am doing with what you told me, turning off all hover underlines unless there is a span around it?

Correct.

Look at the css-d wiki page Christian linked to though. There may be better solutions now.

BTW a simple way around this, but easy to overlook because it's so obvious, is to use two links. One for the image and one for the text under it. Only the one for the text link gets the underline of course.

By the way, do you like my colors better now? I took out all the gray and went with a blue theme.

Yes, I like them much better. Gray isn't supposed to clash with anything, but I thought it did, because the turquoise is so brilliant and medium gray is so dull, so non-brilliant, I think.

You shouldn't rely on my opinion when it comes to colors. I'm not color blind, but I don't have the feeling for it. Mostly I can see what's good, at least to my taste, but I can't do it. I rely on tools like ColorSchemer.
http://www.colorschemer.com/ (Win & Mac)
I have an older version though, before the "studio". There's an online version too, not as good though.
http://www.colorschemer.com/online.html

If you don't mind my asking, what kind of color-blindness to you have? I tried to to learn about that topic some years ago. Had these "filters" I used with PaintShop that changed an image to what people with different forms would see. Quite educational.

[SeanWoods]

Thanks for the idea. How can I get all the in-line links to show the underline when hovering? Do I need to put <span>Link</span> around each one?

Alas, yes.

Is what I am doing with what you told me, turning off all hover underlines unless there is a span around it?

Correct.

Look at the css-d wiki page Christian linked to though. There may be better solutions now.

BTW a simple way around this, but easy to overlook because it's so obvious, is to use two links. One for the image and one for the text under it. Only the one for the text link gets the underline of course.

By the way, do you like my colors better now? I took out all the gray and went with a blue theme.

Yes, I like them much better. Gray isn't supposed to clash with anything, but I thought it did, because the turquoise is so brilliant and medium gray is so dull, so non-brilliant, I think.

You shouldn't rely on my opinion when it comes to colors. I'm not color blind, but I don't have the feeling for it. Mostly I can see what's good, at least to my taste, but I can't do it. I rely on tools like ColorSchemer.
http://www.colorschemer.com/ (Win & Mac)
I have an older version though, before the "studio". There's an online version too, not as good though.
http://www.colorschemer.com/online.html

If you don't mind my asking, what kind of color-blindness to you have? I tried to to learn about that topic some years ago. Had these "filters" I used with PaintShop that changed an image to what people with different forms would see. Quite educational.

When you say

BTW a simple way around this, but easy to overlook because it's so obvious, is to use two links. One for the image and one for the text under it. Only the one for the text link gets the underline of course.

can they both link to the same page at the same time? What I mean (to use the home image/link as an example) is when someone hovers over the word "Home" the home image changes its roll over image. http://www.grammarperfection.com/ Can it still do that if I have two different links?

I get mixed up with shades of blue and purple that are similar. Also, shades of green and brown that are similar. I can tell the difference between the very basic shades of color, but then they aren't their "true" shade (greenish brown, etc.) I can't tell the difference. Probably more colors, but those are the main ones I have trouble with.

This post has been edited by SeanWoods: May 2 2009, 06:54 PM

[SeanWoods]

Thanks for the idea. How can I get all the in-line links to show the underline when hovering? Do I need to put <span>Link</span> around each one?

Alas, yes.

Is what I am doing with what you told me, turning off all hover underlines unless there is a span around it?

Correct.

Look at the css-d wiki page Christian linked to though. There may be better solutions now.

BTW a simple way around this, but easy to overlook because it's so obvious, is to use two links. One for the image and one for the text under it. Only the one for the text link gets the underline of course.

By the way, do you like my colors better now? I took out all the gray and went with a blue theme.

Yes, I like them much better. Gray isn't supposed to clash with anything, but I thought it did, because the turquoise is so brilliant and medium gray is so dull, so non-brilliant, I think.

You shouldn't rely on my opinion when it comes to colors. I'm not color blind, but I don't have the feeling for it. Mostly I can see what's good, at least to my taste, but I can't do it. I rely on tools like ColorSchemer.
http://www.colorschemer.com/ (Win & Mac)
I have an older version though, before the "studio". There's an online version too, not as good though.
http://www.colorschemer.com/online.html

If you don't mind my asking, what kind of color-blindness to you have? I tried to to learn about that topic some years ago. Had these "filters" I used with PaintShop that changed an image to what people with different forms would see. Quite educational.

When you say

BTW a simple way around this, but easy to overlook because it's so obvious, is to use two links. One for the image and one for the text under it. Only the one for the text link gets the underline of course.

can they both link to the same page at the same time? What I mean (to use the home image/link as an example) is when someone hovers over the word "Home" the home image changes its roll over image. http://www.grammarperfection.com/ Can it still do that if I have two different links?

I get mixed up with shades of blue and purple that are similar. Also, shades of green and brown that are similar. I can tell the difference between the very basic shades of color, but then they aren't their "true" shade (greenish brown, etc.) I can't tell the difference. Probably more colors, but those are the main ones I have trouble with.

I think I have it. I used your <span> trick on the text links in the left hand CSS box, and I have

CODE

#left a:hover {text-decoration: none;}

to shut off the underline.

[pandy]

can they both link to the same page at the same time?

Yes (but maybe we don't mean the same thing...).

What I mean (to use the home image/link as an example) is when someone hovers over the word "Home" the home image changes its roll over image. http://www.grammarperfection.com/ Can it still do that if I have two different links?

With a JavaScript rollover, sure. It isn't depending on the image to be inside a link (nor does the event handler need to be for a A). Maybe the JS function needs rewriting, I didn't look.

A problem may be that the text link won't get underlined when the image link is hovered, but that too could ne fixed with JS if necessary. Again I wouldn't bother.

I noticed you have name and id values like the below.

CODE

id="Hover 1/2 off order"
name="Hover skills test"

That's not OK. Values for id and name can't contain spaces.
http://htmlhelp.com/reference/html40/values.html#id

[SeanWoods]

can they both link to the same page at the same time?

Yes (but maybe we don't mean the same thing...).

What I mean (to use the home image/link as an example) is when someone hovers over the word "Home" the home image changes its roll over image. http://www.grammarperfection.com/ Can it still do that if I have two different links?

With a JavaScript rollover, sure. It isn't depending on the image to be inside a link (nor does the event handler need to be for a A). Maybe the JS function needs rewriting, I didn't look.

A problem may be that the text link won't get underlined when the image link is hovered, but that too could ne fixed with JS if necessary. Again I wouldn't bother.

I noticed you have name and id values like the below.

CODE

id="Hover 1/2 off order"
name="Hover skills test"

That's not OK. Values for id and name can't contain spaces.
http://htmlhelp.com/reference/html40/values.html#id

I will change the ID names to have the spaces taken_out.

Check it out now. Works like a charm: http://www.grammarperfection.com/index.html

Thanks!

[pandy]

Hate to tell you, but there is no underline in IE6. What about IE7? No reason for this to happen. Must look at the code.

[pandy]

Ah, I see! You went with the span suggestion. It's alright then.

[Frederiek]

Just a hint on colors: go to http://kuler.adobe.com/ and create a color (eg. based on your background color) in the middle. Then select one of the rules. Gives some nice (contrasting or complemetary) colors.

Hope that helps you to get better colors.

[SeanWoods]

Just a hint on colors: go to http://kuler.adobe.com/ and create a color (eg. based on your background color) in the middle. Then select one of the rules. Gives some nice (contrasting or complemetary) colors.

Hope that helps you to get better colors.

Thanks Frederiek. That seems like a very helpful website for choosing colors.