Hi All

 

Can anyone figure out a way to do this because it has me foxed. I need to have a special menu on one section of this web site with icons, but the guy I am doing it for is quite particular, he wants text-decoration: underline; on all the hovers.

 

My problem is that I don't want the icon image to be underlined on hover, just the text itself. But the icons do need to be clickable, and so need to be part of the link. I've tried to split them but in this scenario all my styles start to conflict and I can't unravel them to get the layout right. Also it seems very messy to try and do it that way. I've also tried to target the images to remove the underline to no avail.

 

Initially I had solved this by using images with backgrounds, which then obscured the underline nicely. However, now my guy wants the current page menu item highlighted with a darker background, so I now need to use a transparent background on the images, hence the return of the underline problem.

 

On the page at the moment only the third menu item down (Simple to install) has the transparent image, I didn't see any point in doing all the transparent images until I could find a way around the problem. So you need to roll over that item to see the problem.

 

The page is at this address

 

The site is not live.

 

Any ideas as to how I can work around this will be gratefully received!

 

Many thanks as always for your help

Forget that ^^^ lol I've just tried it

a {
display:block;
width:200px;
height:20px;
background:url(image.png) no-repeat 0 0;
padding-left:35px;
text-decoration: none;
}

a:hover {
text-decoration: underline;
background-color:red;
}

 

is this what you are looking for? Maybe i didnt understand your problem correctly, let me know.

 

M

I've done this before in my CMS editor...

 

I give all the links a class, in this case .icon - but if you've got another way of specifying the links thats fine :

.icon {
display: inline-block;
font-size: 1.4em;
line-height: 1em;
height: 12px;
background: no-repeat;
margin: 6px 0px 0px;
padding: 1px 25px 5px 0px;
}

 

then each link has a unique class so you can attach the image as a background along the lines of:

.new {
background: url(images/icon_sprite.png) no-repeat right 0px;
}

 

Then you add the rollover underline as normal:

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

 

The padding on the icon class controls the clickable area around the text, but its only the actual text that gets underlined. Obviously insert your own heights etc in the code above, but it should get you going.

You may also need to do some cross browser fixing for the display: inline-block; as well, but thats straight forward to do with a quick google if you don't know how.

By setting the overall styling on the .icon class, and then using individual classes to select the background files only will reduce the amount of css required, to save you repeating

 

  display: inline-block;
       font-size: 1.4em;
       line-height: 1em;
       height: 12px;
       background: no-repeat;
       margin: 6px 0px 0px;
       padding: 1px 25px 5px 0px;

 

for every icon class name. if you get me lol.

Ive had another look at this now I've read it properly

 

try

changing

#featuresmenu a img margin-left to -29px

 

#featuresmenu a padding left to 30px

Ive had another look at this now I've read it properly

 

try

changing

#featuresmenu a img margin-left to -29px

 

#featuresmenu a padding left to 30px

 

That's perfect, thank you so much. So simple even I should have got it!

 

Many thanks

Thank you to everyone else who helped, too.