Page 1 of 1
Don't underline image on hover
Posted: Tue Mar 13, 2007 1:31 pm
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.
Posted: Tue Mar 13, 2007 2:40 pm
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?
Posted: Wed Mar 14, 2007 1:08 am
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
Posted: Wed Mar 14, 2007 12:19 pm
by pickle
You could also make the icon a background image & set some padding in the element.
Posted: Wed Mar 14, 2007 12:23 pm
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.

Posted: Wed Mar 14, 2007 1:11 pm
by nickvd
Have you researched the iepngfix.htc solution? It works on almost any png, background image and whatnot.
Posted: Wed Mar 14, 2007 1:18 pm
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

Posted: Wed Mar 14, 2007 7:43 pm
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.
Posted: Wed Mar 14, 2007 10:09 pm
by Kieran Huggins