Comments on: CSS Hover Icon Menu Using CSS Sprites

By: Mike

Mike — Mon, 20 Jul 2009 10:54:04 +0000

Thank you this helped me a lot!!

By: joanne

joanne — Wed, 17 Sep 2008 15:24:30 +0000

Hi,

I got the images to display but the last image keeps repeating and it doesn’t show up on i.e?

By: joanne

joanne — Wed, 17 Sep 2008 09:05:32 +0000

Hi,

I tryed all this code and put my image in and nothing displays at all. Can you help me?

By: Peter

Peter — Sun, 23 Mar 2008 21:06:50 +0000

I have this code, it works in firefox but in IE6 and IE7 the buttons are displayed BELOW eachother instead of NEXT TO eachother…how can I fix this?

#messagesender {
clear:both;
list-style:none;
list-style-type:none;
}

#messagesender a {
color: #CCC;
text-decoration: none;
}
#messagesender a:hover {
color: #666;
}

#messagesender span {
background: url(/images/buttons.gif);
float: left;
width: 16px;
height: 16px;
margin: 3px 5px 0 0;
}

#messagesender-button-bold span {
background-position: 0px 0px;
}
#messagesender-button-bold a:hover span {
background-position: 0px -16px;
cursor:pointer;
}

#messagesender-button-italic span {
background-position: -16px 0px;
}
#messagesender-button-italic a:hover span {
background-position: -16px -16px;
cursor:pointer;
}

Thanks!
Peter

By: Jermayn Parker

Jermayn Parker — Thu, 13 Mar 2008 02:27:58 +0000

I like this!
Previously I would have used separate images to create the roll over image effect but this is nicer as it only uses extra css code instead of extra images.

By: James Hopkins

James Hopkins — Wed, 12 Mar 2008 17:15:34 +0000

It would be cool if you could update your example with your proposed solution, as I’m sure you’re correct in that we’re thinking about slightly different things!

By: Dave

Dave — Wed, 12 Mar 2008 17:10:45 +0000

It will work as it will force the list item to clear underneath the previous floated element.

You could also use the overflow method on the list item as this would have the same effect.

Maybe we’re thinking of different things so it might be useful if you put an example online somewhere of a problem as there’s usually a better solution than applying the clearfix method (I don’t like adding extra code unless I have too )

By: James Hopkins

James Hopkins — Wed, 12 Mar 2008 17:01:05 +0000

That won’t work. I’m guessing you were thinking along the lines of floating and clearing the anchor element, thus taking it out of the flow which will clear it of any child element floats. However you would be going round in circles a bit as you would then need to clear the anchors parent element, using clearfix or similar.

I would personally just use clearfix on the anchors in the first place.

By: Dave

Dave — Wed, 12 Mar 2008 16:29:18 +0000

Good point. In that case, the following should correct any problems

#navigation li { clear: both; }

By: James Hopkins

James Hopkins — Wed, 12 Mar 2008 16:17:01 +0000

@Dave, the point I’m trying to put across is that not clearing a float container isn’t good practice. If someone who is new to CSS comes across your post and uses a larger icon, they may get confused as to why their border/background around their anchor doesn’t encapsulate the span; same problem if they try to add vertical margin/padding without clearing the float container first.

Nice looking site BTW – check your inbox