I have issue with one of site that I developing.
Situation is like this:
I'm using @font-face generated at fontsquirrel.com, and in every browser, except for IE8 it works fine. In the beginning it worked for IE8 too, but (I guess) after update it stops working normally.
This is what's happening, after page is loaded, font on the page stays the same until you mouse over the document, after that it applies @font-face rule.
You can see that here: http://devel.2klika.net/fiolic/demo/home.php
Also I'm using fbml on that page for fb:like button, this is the code:
<span style="float: right; position: relative; left: 10px;">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/#!/pages/Mesnice-Fiolic/174173775933578" layout="button_count" show_faces="false" width="50" font="arial"></fb:like>
</span>
I figured that commenting out fb:like is solving, sort of, @font-face problem, like this:
<span style="float: right; position: relative; left: 10px;">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<!-- <fb:like href="http://www.facebook.com/#!/pages/Mesnice-Fiolic/174173775933578" layout="button_count" show_faces="false" width="50" font="arial"> </fb:like> -->
</span>
I would like to use that fb:like button if it is possible to make it work with IE8 and @font-face :)
I tested this with Windows 7 64bit, IE 8.0.7601.17514 64bit and 32bit
If I'm using IE8 in compatibility view it works normally.
Does anyone can help me with this issue?
Thanks in advance
I had found a lot of responses on other forums talking about adding namespaces to the html tag as a way of making this work. I decided to try it my self and with great joy, the like button was displaying in IE8.
I changed my html tag from:
<html>
to:
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
As seen in the code I used below:
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
</head>
<body>
<div><fb:like id="fb_like_btn_iframe" show_faces="no" width="220" href="http://www.pixorial.com"></fb:like></div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
api_key = "<%= FACEBOOK['key'] %>";
FB.init({
appId : api_key,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
var like_clicked = function(href, widget){
$.ajax({
type : "POST",
url : '<%= url_for :controller => :gallery, :action => :update_likes %>',
data : {"url_of_like": href, "type": "like", "authenticity_token": <%= form_authenticity_token.inspect %>}
});
parent.likeButtonChanged(href);
}
var like_unclicked = function(href, widget){
$.ajax({
type : "POST",
url : '<%= url_for :controller => :gallery, :action => :update_likes %>',
data : {"url_of_like": href, "type": "unlike", "authenticity_token": <%= form_authenticity_token.inspect %>}
});
parent.likeButtonChanged(href);
}
$(document).ready(function(){
FB.Event.subscribe('edge.create', like_clicked);
FB.Event.subscribe('edge.remove', like_unclicked);
})
</script>
</body>
</html>
I have encountered the same issue. Quite frustrating as there doesn't seem to be a solution aside from removing the like button from the page.
I've submitted a bug report to facebook for this issue.
