Magento CSS and JavaScript not loading due to using file system path

Question

I was unable to install a module using Magento Connect, getting a Connection Error try again later error. Following the instructions of the module developer I attempted to fix permissions in the document root with:

find . -type f -exec chmod 644 {} \;
find . -type d -exec chmod 755 {} \;
chmod o+w var var/.htaccess app/etc
chmod 550 mage
chmod -R o+w media

It still didn't work so I ended up installing the module manually. I then logged into the admin backend and Magento was trying serve CSS files using the system file paths instead of URLs like so:

<link rel="stylesheet" type="text/css" href="/home/user/public_html/js/calendar/calendar-win2k-1.css" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/boxes.css" media="all" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/custom.css" media="all" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/xmlconnect/boxes.css" media="all" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/menu.css" media="screen, projection" />

I immediately removed the extension and tried to match the perms from another server with a working Magento to no avail. I have also:

• Cleared local, APC, and Magento caches
• Looked in error logs (logging is enabled)
• double-checked proper values of web/unsecure/base_url and web/secure/base_url in the DB
• Rebooted, 3 times ;)

Minify is not being used. Merge CSS files are enabled, however I cannot figure out how to disable without the admin interface (save and navigation isn't working, even when I replace the correct values with Firebug). Any ideas would be greatly appreciated!

(Question originally posted by @reflexiv on Stack Overflow)

• joseantgv: Enable exception log and check if all the files exist.

Answer 1

Magento using full path urls to access CSS files is a common error that results from two things happening:

• Having Merge CSS Files Enabled
• Magento being unable to read/write to the media/ folder.

To fix this issue, please ensure that:

• The media/ folder exists in your Magento installation.
• The media/ folder is writable by your web server.

As @flochtililoch posted on Stack Exchange:

You should check that apache actually owns the media directory, by checking first which user apache is running as, and then adjusting permissions accordingly:

chown -R <apache_user> media
chmod -R ug+w media

More information here: Magento Filesystem Permissions

• Dmytro: I had the same issue because of CSS/JS merge was enabled.
• Navarr: @DmitryR: Having merge enabled is itself not the problem, the web server not being able to write to media is the problem. It attempts to do so when merge is enabled, fails, and this results. ;)
• Michael Hampton: This has a serious error: It doesn't just make the folder writable by the apache user, it makes the folder writable by everyone. DO NOT DO THIS. It opens a massive security hole.
• Navarr: Good call. I've updated it to be ug+w instead of o+w

Answer 2

I've just encountered a very similar problem when copying a site from a live server to a local dev (MAMP) apache server. The following resolved it for me:

1. clearing media/css & media/js of all files
2. In the database table core_config_data setting:
   dev/js/merge_files to 0 (had been 1)
   dev/css/merge_css_files to 0 (had been 1)
3. clearing var/cache

Reloaded front & backend & now css/js files are being served correctly.

• Mukesh: The solution suggested by you fixed the issue for me. Thanks.