Portfolio Navigation not displaying in IE9

[divergemedia]

Ed – I am noticing an issue with the theme in IE9/IE7. It seems the footer navigation links do not display properly once within a specific portfolio item.

The site URL is : http://www.divergemedia.com.

I’ve included a screenshot showing the behavior I am experiencing in IE9. The portfolio nav issue is the same in IE7 but there are also social navigation issues in IE7 as well.

Based on additional testing, I have determined there are no issues with the theme for Mac OS in Safari, Firefox, or Chrome, or with Windows OS in IE8, Firefox or Chrome.

I do have a number of plugins installed. I will attempt to test whether activating and deactivating these will resolve the problem.

Has anyone else indicated that this may be an issue?

Thanks for the support!

Chris

[Ben – SUPPORT]

If you are trying to emulate ie7 in ie9 it won’t be exactly the same as an actual version but this is definitely an issue, I’ll get ed to have a look into it now.

Thanks
Ben

[Swift Ideas – Ed]

Do you have any errors in the console? Do you see the same on our demo site? I did have a look but couldn’t replicate.

Let us know.

– Ed

[divergemedia]

I have been digging into this more. The issue doesn’t seem to occur on your site. As for my issues, it seems the problems are all related to Font Awesome. The problem is broader than just the portfolio footer. It also affects the blog footer. Additionally, it seems the icons do not render in the portfolio-details-wrap. Based on the limited research I have done, I am guessing you may need to add some conditional CSS to address the issue. There seem to be a number of forum threads discussing it. Again, the display problems only occur in IE7/9. I specifically found this thread to be helpful. By changing the font-awesome css font declaration as indicated by thorst, I was able to at least restore the social icons. The other problems still seem to be present.

Ironically, the pictos icons used through the theme all show up, although on specific blog post pages, the comments icon and love it icon don’t display on a single line.

Please let me know if you find out anything more as I am anxious to fix this before promoting the site.

Thanks,

Chris

[Swift Ideas – Ed]

Just checking your site, and can see several 404s for the font awesome files. Can you check?

Failed to load resource: the server responded with a status of 404 (Not Found) http://divergemedia.com/wp-content/themes/punch/font/fontawesome-webfont.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://divergemedia.com/wp-content/themes/punch/font/fontawesome-webfont.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://divergemedia.com/wp-content/themes/punch/font/fontawesome-webfont.svg#FontAwesome

– Ed

[divergemedia]

Ed – That solved part of the problem. I accidentally changed the source path when I updated the font declaration. The issue still persists with IE7. Also, I am getting a CSS3114 opentype embedding permissions error with pictos-web.ttf. The pictos error only occurs in IE9. Did you use a different version of the pictos web-font on your personal site? The error doesn’t occur there.

Thanks,

Chris

[divergemedia]

Ed – FYI – I just figured out that the issue of the pictos icons not showing up on the same line had to do with the google font I selected. I was using open sans and it forced the comments/love it icons & count to two lines. Looks like you may need to increase the width for that section in the CSS to accomodate wider fonts?

I still haven’t resolved the pictos not displaying on IE9. I have read through a number of forum posts but was wondering if you had any ideas…

Thanks,

Chris

[Swift Ideas – Ed]

Seems to all be working great here now? Just tested on IE9.

– Ed