Serious Formatting error - IE8 and new Sarafi browser

[alemonte]

This is my first post to the forum. But this bug was driving me crazy and I wanted to share my solution with the community. I wanted to avoid having to explain to my end users (who aren't very computer literate in the first place) how to enable compatibility mode. I spent a lot of time trying to update and hack the CSS to work in IE8.

Thankfully there is a much easier way. Microsoft created a META tag that can be used to define the IE7 rendering engine on pages. This addition to the meta tag on all your chat pages will fix it until a long term solution can be made.

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Excelent! thank you very y much!

[re*s.t.a.r.s.*2]

Also there is a workaround using the .htaccess in your folder root , just write this code and upload it to your oot folder if you are allowed to use .htacces ... regards all.

Code: Select all

<FilesMatch ".(html|htm|php)$">
#
Header set X-UA-Compatible "IE=EmulateIE7"
#
</FilesMatch>

[basicspore]

Hi @ all!

I'm short before gettin' crazy! Just tried all workarrounds from the Forum for this IE8 issue!

- edited htaccess
- added meta tag "<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />" in the index.php
- Combatibility view/settings user end configurations

Nothing works! It just freezes after the "CHAT LOADING... Please wait..." Message!
In Firefox and Chrome everything works fine!



I get the following error in IE8 (when i click on the Statusbar):

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Zeitstempel: Mon, 25 Jan 2010 08:53:46 UTC

Message: Could not continue because of error: c00ce56e. ( I translated this from german so, sorry if it's not the exact errormessage in english!
Row: 1361
Character: 7
Code: 0
URI: http://www.....com/community/chat/data/ ... ototype.js



Any other idea? Thanks in advance!


-------------------------------------------------------

Checking phpfreechat files validity gave me this result

corrupted - ./themes/cerutti/smileys/theme.txt (please replace this file by a correct one)
corrupted - ./themes/cerutti/info.php (please replace this file by a correct one)
corrupted - ./themes/phoenity/smileys/author.txt (please replace this file by a correct one)
corrupted - ./themes/green/info.php (please replace this file by a correct one)
corrupted - ./themes/zilveer/info.php (please replace this file by a correct one)
corrupted - ./themes/default/info.php (please replace this file by a correct one)
corrupted - ./themes/blune/info.php (please replace this file by a correct one)
corrupted - ./src/proxies/lock.class.php (please replace this file by a correct one)
corrupted - ./src/commands/deop.class.php (please replace this file by a correct one)
corrupted - ./style/header.css (please replace this file by a correct one)
corrupted - ./style/show.js (please replace this file by a correct one)
corrupted - ./data/public/js/pfcclient.js (please replace this file by a correct one)
corrupted - ./data/public/js/cookie.js (please replace this file by a correct one)
corrupted - ./data/public/js/image_preloader.js (please replace this file by a correct one)
corrupted - ./data/public/js/md5.js (please replace this file by a correct one)

Maybe it has something to do with that? Eveven if I download the latest package, it gives me the same result?

-------------------------------------------------------

Same Probs with Ver. 1.1 ...

-------------------------------------------------------

NoOne there with an idea? Please help!

[ii001]

This works for me. Replace flowing functions with my version (pfc/data/public/js/pfcgui.js). It basically adds ccs float:left and min-width: 715px. I am using chat with fixed window screen so you may have to modify this values for your site.

getChatContentFromTabId: function(tabid)
{
var className = (! is_ie) ? 'class' : 'className';

// return the chat content if it exists
var cc = this.chatcontent.get(tabid);
if (cc) return cc;

// if the chat content doesn't exists yet, just create a cached one
cc = document.createElement('div');
cc.setAttribute('id', 'pfc_chat_'+tabid);
cc.setAttribute(className, 'pfc_chat');

// Element.addClassName(cc, 'pfc_chat');
cc.style.display = "block"; // needed by IE6 to show the online div at startup (first loaded page)
// cc.style.marginLeft = "5px";
cc.style.styleFloat = "left"; //PERMA IE8 FIX
cc.style.minWidth = "715px"; //PERMA IE8 FIX

this.chatcontent.set(tabid,cc);
return cc;
},
getOnlineContentFromTabId: function(tabid)
{
var className = (! is_ie) ? 'class' : 'className';

// return the online content if it exists
var oc = this.onlinecontent.get(tabid);
if (oc) return oc;

oc = document.createElement('div');
oc.setAttribute('id', 'pfc_online_'+tabid);
oc.setAttribute(className, 'pfc_online');
//Element.addClassName(oc, 'pfc_online');
// I set the border style here because seting it in the CSS is not taken in account
// oc.style.borderLeft = "1px solid #555";
oc.style.display = "block"; // needed by IE6 to show the online div at startup (first loaded page)
oc.style.styleFloat = "left"; //PERMA IE8 FIX
oc.style.borderLeft = "1px solid #000"; //PERMA IE8 FIX

this.onlinecontent.set(tabid,oc);
return oc;
},

[ii001]

Also fix this (pfc/data/public/js/pfcclient.js)

buildNickItem: function(nickid)
{
var className = (! is_ie) ? 'class' : 'className';

var nick = this.getUserMeta(nickid, 'nick');
var isadmin = this.getUserMeta(nickid, 'isadmin');
if (isadmin == '') isadmin = false;

var li = document.createElement('li');

var a = document.createElement('a');
a.setAttribute('href','#');
a.pfc_nick = nick;
a.pfc_nickid = nickid;
a.onclick = function(evt){
var d = pfc.getNickWhoisBox(this.pfc_nickid);
document.body.appendChild(d);
d.style.display = 'block';
d.style.zIndex = '400';
d.style.position = 'absolute';
d.style.backgroundColor = '#FFFFFF'; //PERMA IE8 FIX
d.style.border = '1px solid #000'; //PERMA IE8 FIX

// Elgg shift to right set for popup view
if (window.PFC_POPUP_WIN) {
d.style.right = '10px';
} else {
d.style.left = (mousePosX(evt)-7)+'px';
}
d.style.top = (mousePosY(evt)-7)+'px';
return false;
}
li.appendChild(a);

var img = document.createElement('img');
if (isadmin)
img.setAttribute('src', this.res.getFileUrl('images/user-admin.gif'));
else
img.setAttribute('src', this.res.getFileUrl('images/user.gif'));
img.style.marginRight = '5px';
img.setAttribute(className, 'pfc_nickbutton');
a.appendChild(img);

// nobr is not xhtml valid but it's a workeround
// for IE which doesn't support 'white-space: pre' css rule
var nobr = document.createElement('nobr');
var span = document.createElement('span');
span.setAttribute(className, 'pfc_nickmarker pfc_nick_'+nickid);
span.innerHTML = nick.escapeHTML();
nobr.appendChild(span);
a.appendChild(nobr);

return li;
},

/**
* clear the nickname list
*/
clearNickList: function()
{
/*
var nickdiv = this.el_online;
var fc = nickdiv.firstChild;
if (fc) nickdiv.removeChild(fc);
*/
},

[K8e]

Also there is a workaround using the .htaccess in your folder root , just write this code and upload it to your oot folder if you are allowed to use .htacces ... regards all.

Code: Select all

<FilesMatch ".(html|htm|php)$">
#
Header set X-UA-Compatible "IE=EmulateIE7"
#
</FilesMatch>

That works for me , and thank you so much for your post. A quick easy fix for ie8 users to my site. All users using ie8 report no issues since I implemented this in htaccess. Thank You