Google+1 and Stumbleupon behave badly in IE

Using SM Toolkit 2.0

Google+1 and Stumbleupon are not behaving properly in IE.

In IE9, the icons appear but the whole "toolkit" disappears when they are moused-over.

In IE8, neither icon appears.

In IE7 they also act weird, although I don't remember exactly what weirdness they do but it's similar weirdness.

All work okay in Chrome, FF and Safari.

See example here:

printA.asp

Just mouseover the globe icon/share

All help and hints appreciated!

I think the script you are using for showing and hiding the like buttons is causing the issue. I dont see where the onmouse over event is defined, but if i change the css for the social media buttons to remove the display none attribute, the problem goes away.

If it is the script, it's the script generated by Social Media Toolkit 2.0.

What's wrong with it.

This is the content of the wasocial.js generated by SMT 2.0:

function addBookmark(title, url) {
if (window.sidebar) { // firefox
window.sidebar.addPanel(title, url,"");
} else if( document.all ) { //MSIE
window.external.AddFavorite( url, title);
} else {
alert("Sorry, your browser doesn't support this feature");
}
}

This the wasocial.css generated by SMT 2.0:

/** Horizontal Counter **/
.wa_social_counter_hr {
overflow:hidden;
}
.wa_social_counter_hr img {
border:none;
}
.wa_social_counter_hr .button {
float:left;
margin:0 5px;
}

/** Vertical Counter **/
.wa_social_counter_vr {
overflow:hidden;
}
.wa_social_counter_vr img {
border:none;
}
.wa_social_counter_vr .button {
float:left;
margin:0 5px 0 0;
}

/****** Icons ******/
.wasocial {
position:relative;
}
.wasocial .share_icon {
margin-right:1px;
}
.wasocial a {
text-decoration:none;
font-size:18px;
display:block;
color:#999;
font-family: 'GillSansMTCndnsd', Arial, Helvetica, sans-serif;
}
.wasocial img {
border:none;
}
.wasocial .icons {
float:left;
margin:5px;
}
.wasocial:hover .share {
display:block;
}
.wasocial .share {
display:none;
background-image:url(icons/icons_bg.png);
background-repeat:repeat-x;
border:1px solid #000000;
background-color:#D7D7D7;
position:absolute;
}
.wasocial .share .wrapper {
overflow:hidden;
}
/** Twitter **/
#custom-tweet-button a {
width:20px;
height:20px;
display:inline-block;
background: url(icons/twitter.png) left center no-repeat;
}
/** facebook **/
.FBConnectButton_Simple, .FBConnectButton_RTL_Simple {
background-image:none !important;

}
.FBConnectButton_Simple .FBConnectButton_Text_Simple {
background-image: url("icons/facebook.png") !important;
display:block;
height: 20px;
width: 20px;
margin:0 !important;
}
/** digg **/
.db-wrapper .db-digger {
background: url(icons/digg.png) no-repeat scroll 0 0 transparent;
height: 20px;
width: 20px;
}
/** delicious **/
.large #delicious {
border:none;
}
/** google buzz **/
a.google-buzz-button .buzz-button-2 {
display:none !important;
}
a.google-buzz-button .buzz-button-1 {
background: url(icons/google_buzz.png) no-repeat scroll 0 0 transparent !important;
height: 20px !important;
width: 20px !important;
}
a.google-buzz-button .buzz-button-3 {
display:none !important;
}
/** stumble on **/
.badge6 .suHostedBadge a {
background-image:url(icons/stumble_upon.png) !important;
}
/** digg **/
.db-wrapper .db-digger {
cursor:pointer;
}

I'm saying it is the script you have in place for showing and hiding the social media plugins, that seams to be what is causing the problem.

And I'm saying that if there is a script (and it's not a hover event) it was generated by SMT 2.0.

Look at your Insert Share Buttons extension in DW. There is a check box that says 'Hide buttons under a "Share" link.'

That is what was selected so if there is faulty code it was generated by SMT 2.0.

It sounds like you might not be aware of this possibly buggy SMT 2.0 feature.

I apologize, your correct, i was not aware of the option to hide the icons, you are also correct that there is a bug in this feature.

basically, it is an issue with using the css :hover pseudo class and iframes. Both Google and Stumble Upon use iframes for their buttons which don't behave correctly with the hover.

I have logged this as a bug and we will probably correct it by using a javascript onclick method for showing and hidding the buttons. you can add this to your page by editing the wasocial.css file and commenting the hover method:

/*.wasocial:hover .share {
 display:block;
}*/

add the following script code just before the </head tag:

<script type="text/javascript">
function toggleSocial() {
	var socialElem = document.getElementById('share');
	if(socialElem.style.display == 'block') {
		socialElem.style.display = 'none';
	} else {
		socialElem.style.display = 'block';
	}
}
</script>

edit the share div tag:

<div class="share">

to include an ID:

<div class="share"  id="share">

and edit the link:

<a href="#"><img src="../webassist/social/icons/greyEarth.png" align="absmiddle" class="share_icon" />&nbsp;share</a>

to call the toggleSocial function on click:

<a href="#" onClick="toggleSocial();"><img src="../webassist/social/icons/greyEarth.png" align="absmiddle" class="share_icon" />&nbsp;share</a>

NOTE:
Google + only support IE 8 and above, they do not support the Google + buttons in older versions of IE
answer.py?hl=en&answer=1140194

Thank you.

I will implement your changes and report back.

Tried it and it worked for the most part.

In IE9, it now works as it should.

In IE8, Google+ appears but StumbleUpon is still missing (but I can live with that).

In IE7, neither appear but no biggie.

I also improved on your fix as I preferred it when it was a hover event than a click event.

To this end, I changed onClick to onMouseOver.

I added a "toggleUnSocial" function to your script and added an onMouseOut trigger to the link.

Then I moved both the onMouseOver and onMouseOut triggers from the link to the div with the wasocial class like so:

<div class="wasocial" onMouseOver="toggleSocial();" onMouseOut="toggleUnSocial();">

The result is here:

printAA.asp