Making a:hover img NOT underline |
Making a:hover img NOT underline |
SeanWoods |
May 2 2009, 04:19 PM
Post
#1
|
Member Group: Members Posts: 42 Joined: 23-March 09 Member No.: 8,142 |
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 |
May 2 2009, 04:58 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
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 |
May 2 2009, 05:06 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,663 Joined: 10-August 06 Member No.: 7 |
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 QUOTE 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 |
May 2 2009, 05:20 PM
Post
#4
|
Member Group: Members Posts: 42 Joined: 23-March 09 Member No.: 8,142 |
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 |
May 2 2009, 06:40 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
QUOTE 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. QUOTE 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. QUOTE 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 |
May 2 2009, 06:49 PM
Post
#6
|
Member Group: Members Posts: 42 Joined: 23-March 09 Member No.: 8,142 |
QUOTE 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. QUOTE 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. QUOTE 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 QUOTE 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 |
May 2 2009, 07:04 PM
Post
#7
|
Member Group: Members Posts: 42 Joined: 23-March 09 Member No.: 8,142 |
QUOTE 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. QUOTE 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. QUOTE 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 QUOTE 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 |
May 2 2009, 07:26 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
QUOTE can they both link to the same page at the same time? Yes (but maybe we don't mean the same thing...). QUOTE 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 |
May 2 2009, 07:42 PM
Post
#9
|
Member Group: Members Posts: 42 Joined: 23-March 09 Member No.: 8,142 |
QUOTE can they both link to the same page at the same time? Yes (but maybe we don't mean the same thing...). QUOTE 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 |
May 2 2009, 08:31 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
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 |
May 2 2009, 08:35 PM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Ah, I see! You went with the span suggestion. It's alright then.
|
Frederiek |
May 3 2009, 03:32 AM
Post
#12
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 |
May 3 2009, 11:09 AM
Post
#13
|
Member Group: Members Posts: 42 Joined: 23-March 09 Member No.: 8,142 |
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. |
Lo-Fi Version | Time is now: 2nd May 2024 - 04:58 PM |