Don't underline image on hover

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Don't underline image on hover

Post by Luke »

Alright, on this site, take a look up at the FAQ, Search, Memberlist, etc. How come when you hover of the text, it underlines only the text? Why doesn't it underline the image as well? The reason I ask is because on my site when you hover over my menu items, both the icon and the text is underlined, and it's ugly.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I it works fine with me:

Code: Select all

a.main {
text-decoration: none;
}
a.main:hover {
text-decoration: underline;
}

Code: Select all

<a href="#" class="main"><img src="http://google.com/images/logo.gif" width="20" border="0" />Text next to it</a>
Are you using the text-decoration property?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Code: Select all

a:hover img {
text-decoration: none;
}
should take care of that problem. Underlining images shouldn't be default behaviour IMO
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

You could also make the icon a background image & set some padding in the element.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

to pickle:
yea that's what I wanted to do, but unfortunately IE doesn't know how to display png images properly (which is what the icons are), so I have to use javascript to fix png images ( I really don't care if they are rendered wrong for those with javascript disabled... I can deal with that ) and it only works on <img> tags with a height and width attribute. :(
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Have you researched the iepngfix.htc solution? It works on almost any png, background image and whatnot.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I looked into it a little... there was something that turned me off about it but I can't recall what it was :(
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

nickvd wrote:Have you researched the iepngfix.htc solution? It works on almost any png, background image and whatnot.
Interesting... I've been working on a jqPlugin called "pngies" which stands for "PNG Internet Explorer Support".

But it doesn't support backgrounds and I'm still working on resize issues.

Links to the htc would be great though, whatever a .htc is. You could PM or post here if you'd like.

EDIT: How is it even possible to allow alpha trans pngs in IE6 for backgrounds? Atleast I don't know of any hack for this.
Post Reply