Alternatively, with the same tools, if I want to get tricky and keep as much as possible in the CSS (and I usually do), I prefer to set in an <> with the following css

Display:block;
Width:xxpx;
Height:xxpx;
Background-image:url(/blahblah/blah.png);
Background-repeat:no-repeat; (if applicable)

Doing the above allows for easy image swapping, hovers, etc and should work in all browsers as well.

If we have more free reign, and the fonts are web standard, then I would do something similar to the above, but the background image would only be the icon. Going straight off my crazy-morning brain without looking at an editor… something like you have below might look like this:

.KEDUfacebook {
Padding:5px 5px 5px 35px;
Border:1px solid #color;
Line-height:15px;
Font-size:15px;
Font-family:whatever web standard font they’re using;
Background-image:url(/images/facebook-icon.png);
Background-repeat:no-repeat;
Background-position:5px 5px;
Display:block;
Height:xxpx;
}

This would be the HTML:

KaiserEDU on Facebook

Now for the different ways of setting opacity…

For Internet Explorer:

filter: alpha(opacity=90);

For Mozilla:

-moz-opacity: 0.9;

For Safari (current):

opacity: 0.9;

This is the important one. It is the current standard supported by Safari, Opera and Firefox

For Safari (old):

-khtml-opacity: 0.9;

This is for older versions of Safari, back before it adopted webkit (which is what you use for something like round borders).

How To Do It: Instead of “swapping” out the original image and the image you see when you hover over, we’re going to make the original image go away. Think of this as a disappearing act.

First, I’ll show you what my horizontal list looks like:

The code:

So there I have inserted the images (normal state) into the <li> tags of my menu list. Next we’re going to add some CSS styles.

In my case, I want a horizontal list that does not have bullets, so I will need to make the <li> tags display inline, else it will give me a vertical list and style the list style type with none. Make sure you add the display block style to the li’s a element. If you don’t do that, the images will flicker when you hover over them. Try it with and without that style and you’ll see what I mean.

ul.headerMenuList li {
  list-style-type: none; //gets rid of the bullets next to each item
  float: left;
}

ul.headerMenuList li a {
  display: block; //make sure you add this style, else the images will flicker when you hover over them!
}

ul.headerMenuList li img {
  border: none;
}

You’re going to have different images for each menu item so you’ll have to give each item a separate class. Then in the CSS, you’ll give each of those classes a different background image to use which serves as the hover image.

Also, you’ll need to style the a element (with the image) when it’s being hovered over. When you hover over the item, you want to give it the effect of swapping/changing. What we’ll do here is add a visibility styling (hidden). That way, when you hover over the <li> (that already has a background image) it will hide the normal state image and display the hover image (background image).

Here’s my menu when you hover over “Home”:

The CSS looks like this:

ul.headerMenuList li.home {
  background-image: url(/imgs/home_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.home a:hover img {
  visibility: hidden;
}

ul.headerMenuList li.findProviders {
  background-image: url(/imgs/findProviders_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.findProviders a:hover img {
  visibility: hidden;
}

ul.headerMenuList li.findPayers {
  background-image: url(/imgs/findPayers_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.findPayers a:hover img {
  visibility: hidden;
}

ul.headerMenuList li.news {
  background-image: url(/imgs/news_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.news a:hover img {
  visibility: hidden;
}

ul.headerMenuList li.educationalTools {
  background-image: url(/imgs/educationalTools_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.educationalTools a:hover img {
  visibility: hidden;
}

With the Javascript method I previously posted, you have to preload the images. With this CSS method, you do not have to preload any images. The concept of this method is easy to grasp – you have an image and then you have a different image you want to reveal when you mouse over it. For people (like me) who don’t want to mess with Javascript, this is definitely a solid method!

Note: This method is not compatible with IE6 as it does not support attribute selectors (a:hover) nor context-dependent styles (a:hover img). To hell with IE6.

The Solution: Use the style “overflow: hidden;”

The CSS looked like this:

.container {
border: 1px solid #cccccc;
border-top: none;
}

So then, I was like: SHAZAM! and used “overflow: hidden;” and here is the result:

The CSS now looks like this:

.container {
border: 1px solid #cccccc;
border-top: none;
overflow: hidden;
}

Basically, whenever you have some type of content (image, text, div, anything!) that is outside of where it is supposed to be (like a container div), check that the code is correct. Check that there are proper opening/closing tags. If all else fails, try “overflow: hidden;” on the container div and it should do the trick!

乾杯!
Cheers!