i'm using MAMP on my MacBook Pro as a local server. PHP and MySql are running fine. However, i have a strange issue with CakePHP - CSS only works on homepage of my site and only by the two following paths: 'localhost' and 'localhost/index.php'
Using 'localhost/index.php/' however returns just the bare unstyled markup as does all other pages in the site. How can a slash a the end break the CSS?
A few searches have suggested this could possibly be a mod rewrite issue in apache, but i'm out of my depth to be honest - i don't know how to test if changes i make turn mod rewrite on.
As CSS works only for 2 specific paths, could it perhaps be a problems with my routes? I only have 2 defined - '/' and '/index.php/' - and they are both the same.
Any help will be greatly appreciated, JamesAnswer1:
The problem is most likely as tbwcf says that you're trying to load the CSS files using relative file paths, but you should always use <a href="http://book.cakephp.org/view/1437/css" rel="nofollow">CakePHP's helpers</a> to add resource files to the layout:
<?php echo $this->Html->css('style'); ?>
The above will output
<link rel="stylesheet" type="text/css" href="/css/style.css" />
The benefit is that if you install the app to some other directory the path changes automatically:
<link rel="stylesheet" type="text/css" href="/other/directory/css/style.css" />
Do <em>not</em> use relative file paths like
../css. It will break the layout again in all but the simplest cases.
It looks like your MAMP configuration (or Apache within MAMP has mod_rewrite disabled. It looks like you have to follow <a href="http://documentation.mamp.info/en/mamp-pro/advanced-functions/edit-configuration-files" rel="nofollow">http://documentation.mamp.info/en/mamp-pro/advanced-functions/edit-configuration-files</a> instructions, edit template for apache's httpd.conf, search for mod_rewrite and uncomment this line in config template.Answer3:
The slash at the end of the markup is most likely breaking the file path to your stylesheet. For example if your css is referenced as
<link rel="stylesheet" href="css/stylesheet.css" />
then adding the slash to the page URL would mean you'd need to jump back a step to get to the same stylesheet as it would no longer be in the same folder as the page you're on.
So you could add
../ before the reference like <link rel="stylesheet" href="../css/stylesheet.css" />
Or possibly an easier solution in this case would be to reference your stylesheet absolutely like:
<link rel="stylesheet" href="http://localhost:8888/project/css/stylesheet.css" />