Ninja CSS Blog

filter:alpha(opacity=90);
-khtml-opacity: 0.9;
-moz-opacity:0.9;
opacity: 0.9;

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).

.someClass {
  padding-top: 10px; /* shows in all browsers */
  *padding-top: 10px; /* shows in IE7 and below */
  _padding-top: 10px; /* shows in IE6 and below */
  *padding-top: 10px;_padding-top:10px; /*shows in IE7 and IE6 */

I hate when I upgrade WP and my plugin(s) break. Please bear with me as I figure out how to fix my blog =)

What You Want To Do: You have a horizontal (or vertical) menu list – when you hover over each item, you want it to “change” so that it indicates you’re mousing over it and you don’t want to use Javascript to accomplish this.

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.

What You Want To Do: you have a menu of items or a set of images that need to change when they are hovered over.

How To Do It: Use the MM Image Swap!

Put the following code between the <head> tags or a Javascript file that is called on whichever page(s) you want to swap images on.

Now, for the section that has the menu items (or images) that you want to swap, you need to call the functions. The example I'm going to give is the menu list I used, so adjust accordingly. If you didn't use a <ul> list, then don't copy my code exactly. Also, you'll need to swap out the image file names, height and width, etc. to your own.

Finally, go to the <body> tag and preload the images. Again, change the image file names to your own.

<body onLoad="MM_preloadImages('home.jpg', 'home_on.jpg', 'createMap.jpg', 'createMap_on.jpg', 'createTable.jpg', 'createTable_on.jpg', 'dataDownloads.jpg', 'dataDownloads_on.jpg', 'researchFindings.jpg', 'researchFindings_on.jpg')">

The Problem: The outer container was not wrapping around some text. It was clear in my code that the text should be inside the area with the grey border.

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!

This is where I will put up HTML/CSS/Javascript issues I come across. If I have a solution to the problem, I will also post that. I’ll also write about anything I come across that might be seen as helpful or cool to a front-end web developer (aka ME).