Halo.

I have problem with Kcfinder when my website is online (when I've uploaded to my hosting cpanel). When it was still in my laptop drive localhost (Xampp) everything was just fine.

As you can see of the picture I attached below, when I click button "Browse server" to upload a file/picture, the kcfinder dialog box yes shows up, but it kinda doesn't stop loading (ah and the dialog box layout is cluttered). Then, when it still keeps loading (with cluttered layout dialog box), I click button "upload" and (in google chrome:) nothing happens, while I also try to click button "upload" (in mozilla firefox:) the Kcfinder dialog box results "The address wasn't understood | Firefox doesn't know how to open this address, because one of the following protocols (kcact) isn't associated with any program or is not allowed in this context. | You might need to install other software to open this address."

Please help.
Thank you.

[KK]

That seems to be some kind of a JavaScript error. Could you please take a look at Chrome dev console or FF FireBug and let us know if you see something being reported?

Thanks.

@KK:

Here are things (!) that show up in FF console:

CSS:
Unknown property '-moz-border-radius'. Declaration dropped. styles.css:266:19
Unknown property '-moz-border-radius-topleft'. Declaration dropped. styles.css:273:27
Unknown property '-moz-border-radius-topright'. Declaration dropped. styles.css:274:28
Unknown property '-moz-border-radius'. Declaration dropped. styles.css:319:19
Unknown property 'zoom'. Declaration dropped. styles.css:345:5
Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. styles.css:349:9
Unknown property '-moz-border-radius'. Declaration dropped. styles.css:370:19
Unknown property 'zoom'. Declaration dropped. styles.css:385:5
Unknown property 'zoom'. Declaration dropped. styles.css:394:5
Unknown property '-moz-border-radius'. Declaration dropped. styles.css:566:20
Unknown property '-moz-border-radius'. Declaration dropped. styles.css:678:19
Unknown property '-moz-border-radius'. Declaration dropped. styles.css:691:19
Unknown property '-moz-border-radius'. Declaration dropped. styles.css:698:19
Unknown property '-moz-border-radius'. Declaration dropped. styles.css:762:21
Expected 'important' but found 'importan'. Expected ';' or '}' to terminate declaration but found 'importan'. Declaration dropped. styles.css:862:75
Unknown property '-moz-border-radius'. Declaration dropped. tablegear.css:3:105
Unknown property '-moz-border-radius'. Declaration dropped. tablegear.css:13:39
Unknown property '-moz-border-radius'. Declaration dropped. tablegear.css:14:38
Unknown property '-moz-border-radius'. Declaration dropped. tablegear.css:15:53
Unknown property '-moz-border-radius'. Declaration dropped. tablegear.css:16:52
Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. tablegear.css:32:11
Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. admin
Unknown property '-moz-border-radius'. Declaration dropped. style.css:19:22
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:22:19
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:29:19
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:36:19
Unknown property '-moz-border-radius'. Declaration dropped. style.css:45:22
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:48:19
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:55:19
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:61:19
Unknown property '-moz-border-radius'. Declaration dropped. style.css:70:22
Unknown property '-moz-border-radius'. Declaration dropped. style.css:90:22
Unknown property '-moz-border-radius'. Declaration dropped. style.css:100:22
Unknown property '-moz-border-radius'. Declaration dropped. style.css:132:22
Unknown property '-moz-border-radius'. Declaration dropped. style.css:178:22
Unknown property '-moz-border-radius'. Declaration dropped. style.css:228:22
Unknown property '-moz-border-radius'. Declaration dropped. style.css:242:22
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:251:19
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:259:19
Unknown property '-moz-border-radius'. Declaration dropped. style.css:292:22
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:299:19
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:309:19
Unknown property '-moz-border-radius'. Declaration dropped. style.css:347:22
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:361:19
Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. style.css:412:12
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:420:19
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:425:19
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:439:19
Unknown property '-moz-border-radius'. Declaration dropped. style.css:493:22
Unknown property '-moz-border-radius'. Declaration dropped. style.css:514:22
Unknown property '-moz-box-shadow'. Declaration dropped. style.css:522:19
The stylesheet http://changeforbettertangsel.com/admin ... ?type=file was not loaded because its MIME type, "text/html", is not "text/css".


JS:
Use of getAttributeNode() is deprecated. Use getAttribute() instead. mootools-core-1.4.5.js:343:0
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ jquery.js:18:0
The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.

[KK]

Thanks.

While we can ignore most of those warnings, the important one amongst them was this -

The stylesheet http://changeforbettertangsel.com/admin ... ?type=file was not loaded because its MIME type, "text/html", is not "text/css

This clearly shows that the CSS file was not loaded which would explain the strange appearance.

One reason for this could be some PHP 'Headers already sent' error encountered while serving the CSS file. This usually happens if you have modified couch/kfunctions.php and have introduced some newline at the top etc.

If you find it difficult to track down the problem, you can get me FTP+Couch access and I'll be happy to take a look.

[KK]

Thanks for the creds.

I had a look and, as I suspected, it was indeed the PHP 'Headers already sent' error. In this case it was triggered by your couch/config.php having the infamous two BOM bytes in it (please see viewtopic.php?f=4&t=53).

I saved the config file using 'UTF-8 without BOM' in Notepad++ and that is all that was required.
KCFinder seems to be working fine to me. Please check and verify.

Thanks.

Wow, it's solved kk! Great!

But I still don't get it.

1. First, I saw config.php that you've repaired
2. then I saw the review "http://www.couchcms.com/forum/viewtopic.php?f=4&t=53" and it said that it is caused by some "unexpected spaces" in the first line before the "<?php"
3. So I opened the config.php that you've repaired and added some spaces before the "<?php" and yes it went back to former error
4. I removed the spaces and it went back to normal
5. Then I replaced the config.php that you've repaired with config.php from my localhost. It went back to the former error. Then I checked the latest config.php that I just moved in with the cpanel code editor there was no the unexpected spaces before the "<?php".
6. So I copy and paste all the code inside the code editor and paste it in to new file of notepad and saved as "config.php" with encoding UTF-8.
7. I uploaded it to replace the previous one, and boom, it worked.

So, what did you mean by "the infamous two BOM bytes" and "UTF-8 without BOM"? I know BOM stands for "Byte order mark", but I don't really understand it in this error case.

Ok never mind kk, I was wrong, resulting can't do it (save UTF-8 without BOM) with with windows basic notepad, it is apparently error again. I don't use notepad ++, I use Sublime text editor. So I save the config.php with "save with encoding UTF-8 (without BOM)" by Sublime. Previously I had no idea (about such BOM thing), but now I do. It's all perfectly solved!

Thanks a lot KK for your time! So much appreciated!

[KK]

I'll try to explain, Herza.
The thread I mentioned actually discusses *two* discrete reasons leading to the same 'headers already sent' problem -
1. The invisible BOM bytes
2. Any 'space', 'newline', 'tab' etc. character before the '<?php' statement.

Keeping those two reasons in mind, let us go through what you experienced -

1. First, I saw config.php that you've repaired

OK.

2. then I saw the review "http://www.couchcms.com/forum/viewtopic.php?f=4&t=53" and it said that it is caused by some "unexpected spaces" in the first line before the "<?php"

You actually saw only the second reason. The primary reason discussed in the thread are the 'invisible' BOM bytes. Both cause the same problem.

3. So I opened the config.php that you've repaired and added some spaces before the "<?php" and yes it went back to former error

This is the 'second' reason in action.

4. I removed the spaces and it went back to normal

As is to be expected.

5. Then I replaced the config.php that you've repaired with config.php from my localhost. It went back to the former error. Then I checked the latest config.php that I just moved in with the cpanel code editor there was no the unexpected spaces before the "<?php".

This one had the 'first' cause - the BOM bytes. These bytes, unlike the spaces, are not visible. If the editor encodes a file using UTF-8 with BOM, these bytes will be present (and cause the problems).

6. So I copy and paste all the code inside the code editor and paste it in to new file of notepad and saved as "config.php" with encoding UTF-8.

Saving a file explicitly stating 'UTF-8 without BOM' is what is required to remove the BOM bytes. Notepad++ has this option. Other editors might have a different name. I suppose that is what your editor did just this while saving.

7. I uploaded it to replace the previous one, and boom, it worked.

As expected.

So, what did you mean by "the infamous two BOM bytes" and "UTF-8 without BOM"?

Editors usually give a choice of saving a file using 'UTF-8' and 'UTF-8 without BOM'. Both are same except that the first one tacks two invisible (to our eyes) marker bytes called BOM. These bytes cause PHP to freak out and so we need to explicitly state "save using 'UTF-8 without BOM'" while saving.

Hope that explains it.

I have the exact same issue with the way the KC Finder is displaying.
I have checked my config.php and saved it without BOM, but the issue still persists.

Console reports slightly differently:

[Error] Did not parse stylesheet at 'https://site/includes/kcfinder/css.php?type=image' because non CSS MIME types are not allowed in strict mode.
> Selected Element
< <iframe frameborder="0" hspace="0" id="TB_iframeContent" name="TB_iframeContent" onload="TB_showWindow()" src="https://site/includes/kcfinder/browse.php?nonce=cc969e6062c8401e1af3ae10295ef62b&type=image&" style="display:block;width:669px;height:492px;">
#document
</iframe>

The key seems to be the "because non CSS MIME types are not allowed in strict mode" statement.

Anyone with any ideas?

[KK]

The key seems to be the "because non CSS MIME types are not allowed in strict mode" statement.

You are right. Googling for that seems to suggest it is a configuration problem with nginx.

Anyway, if you could PM me the FTP+Couch creds for your site, I'd like to take a look at the issue first-hand.

Thanks,