rhonsir

This is my hack for the IE problem:
I added a bg image to the div so even IE didn’t render the photo, since a placeholder was added, this menu will not be blank.

.c.smm-img.smm-img1.smm-1.smm-layout1.smm-jq {
  background: url(../wp-content/uploads/2013/01/thumbnail.jpg) center no-repeat;
  height: 100px;
  width: 100px;
}

If you’re using this menu with sublinks, here’s what I did:
I set the ‘text’ to OVER IMAGE then I added these lines to style.css

#smm-overimage {
  opacity: 0;
  transition: opacity 0.1s linear;
  -moz-transition: opacity 0.1s linear; /* Firefox 4 */
  -webkit-transition: opacity 0.1s linear; /* Safari and Chrome */
  -o-transition: opacity 0.1s linear; /* Opera */
  height: 100px; /*same height with the placeholder above*/
}

#smm-overimage:hover {
  background: rgba(255, 255, 255, 0.9);
  opacity: 1;
}

Hope this will help.

I added these lines to style.css

.c.smm-img.smm-img1.smm-1.smm-layout1.smm-jq {
  background: url(../wp-content/uploads/2013/01/thumbnail.jpg) center no-repeat;
  height: 100px;
  width: 100px;
}

It served as a placeholder so even IE didn’t render the photo, your visitors will still see something.

And if you are using sublinks, here’s what I did:
I set the ‘text’ to OVER IMAGE then I added these lines to style.css

#smm-overimage {
  opacity: 0;
  transition: opacity 0.1s linear;
  -moz-transition: opacity 0.1s linear; /* Firefox 4 */
  -webkit-transition: opacity 0.1s linear; /* Safari and Chrome */
  -o-transition: opacity 0.1s linear; /* Opera */
  height: 100px; /*same height with the placeholder above*/
}

#smm-overimage:hover {
  background: rgba(255, 255, 255, 0.9);
  opacity: 1;
}

Hope this will help.