-3

On my website I placed some social icons which transform when hovered and also contain a custom font. They work fine on my main site for all browers including IE. But on my forums where I use the same code it doesn't work using IE.

You take take a look at the actual sites here:

main site: http://mydivision.net/ - fine in all browsers including IE
forums: http://mydivision.net/forum/ - fine in all browsers exluding IE

CSS code:

<style type='text/css'>
@font-face {font-family: 'icomoon'; src:url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.eot'); src:url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.eot?#iefix') format('embedded-opentype'), url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.ttf') format('truetype'), url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.woff') format('woff'), url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.svg#icomoon') format('svg'); font-weight: normal; font-style: normal;}
#social_container {float: right; height: 40px; width: 230px; margin: 90px 0 0 0;}
.so_link {width: 32px; height: 32px; border-radius: 50%;}
.so_fb, .so_gp , .so_tw, .so_yt, .so_st, .so_fe {width: 32px; height: 32px; float: left; margin-right: 4px; border: 1px solid #fff; border-radius: 50%; -webkit-transition:all 0.4s ease; transition:all 0.4s ease;}
.so_fb:hover {background: #3b5998; border: 1px solid #3b5998;}
.so_gp:hover {background: #d34836; border: 1px solid #d34836;}
.so_tw:hover {background: #00aced; border: 1px solid #00aced;}
.so_yt:hover {background: #cd201f; border: 1px solid #cd201f;}
.so_st:hover {background: #000; border: 1px solid #000;}
.so_fe:hover {background: #ffbb33; border: 1px solid #ffbb33;}
.so_fb:hover, .so_tw:hover, .so_yt:hover, .so_st:hover, .so_gp:hover , .so_fe:hover {transform: rotate(-360deg); -webkit-transform: rotate(-360deg); transition-duration: 0.5s; -webkit-transition-duration: 0.5s;}
.so_fb:before, .so_tw:before, .so_yt:before, .so_st:before, .so_gp:before , .so_fe:before {font-family: 'icomoon'; font-size: 24px; color: #fff; position: relative;}
.so_fb:before {content: '\f09a'; top: 4px; left: 9px;}
.so_tw:before {content: '\f099'; top: 4px; left: 6px;}
.so_yt:before {content: '\f167'; top: 3px; left: 6px;}
.so_st:before {content: '\f1b6'; top: 3px; left: 3px;}
.so_gp:before {content: '\f0d5'; top: 4px; left: 6px;}
.so_fe:before {content: '\f09e'; top: 4px; left: 8px;}
</style>

HTML code:

    <div id="social_container">
        <a class="so_link" href="https://www.facebook.com/mydivision.net" title="Werde Fan auf Facebook!" target="_blank"><span class="so_fb"></span></a>
        <a class="so_link" href="https://twitter.com/MYDIVISIONNET" title="Folge uns auf Twitter!" target="_blank"><span class="so_tw"></span></a>
        <a class="so_link" href="http://www.youtube.com/DIVISIONNET" title="Abonniere uns auf YouTube!" target="_blank"><span class="so_yt"></span></a>
        <a class="so_link" href="http://steamcommunity.com/groups/MYDIVISIONNET/" title="Trete unserer STEAM-Gruppe bei!" target="_blank"><span class="so_st"></span></a>
        <a class="so_link" href="https://plus.google.com/+MyDivisionNetPlus" title="Finde uns auf Google+!" target="_blank"><span class="so_gp"></span></a>
        <a class="so_link" href="http://mydivision.net/feed/" title="Abonniere unser RSS-Feed!" target="_blank"><span class="so_fe"></span></a>
    </div>

It's the same code, so I don't know why it's not working.
Could anyone please help?

5
  • Please post your code here.
    – haxtbh
    Dec 13, 2014 at 15:15
  • Please read the guidelines on posting requests for debugging help. In addition to posting your code, you need to describe the expected behavior and the actual behavior in detail. "Doesn't work" is not a useful description of a bug. Do you think we are mind-readers? Also, describe attempts you made to debug the problem yourself, and what the results were. You also need to provide details like IE versions.
    – user663031
    Dec 13, 2014 at 16:50
  • That's why I posted links to the sites. Simply visit them with any browser but IE and then look at the second link using IE.
    – jackennils
    Dec 13, 2014 at 16:51
  • You might want to ask yourself why your question is being downvoted or voted to close. It's because people do not want to visit some other site with multiple browsers. Post all relevant information here. This is not just me, this is standard SO best-practices.
    – user663031
    Dec 13, 2014 at 16:54
  • It may be due to IE issues... coz we know that IE doesn't support all the features... may be the same problem here too... Dec 13, 2014 at 17:04

1 Answer 1

0

I would hazard a guess that it is something to do with the meta http-equiv tag being set to display the forum in IE7 mode?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.