60641

CSS not working with CakePHP, using MAMP

Question:

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, James

Answer1:

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.

Answer2:

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" />

Recommend

  • Visual Basic Vending Machine
  • mod-rewrite rule for sitemap.xml
  • Is need install mysql on AWS EC2 if i am using AWS rds as database instance?
  • why route of backbone needs the default route
  • Manage different base layouts in Angular2
  • What is wrong in my MVC implementation?
  • React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?
  • android-support-v7-appcompat has same attrs as actionbarsherlock library
  • Adding independent aspx/asmx pages into DotNetNuke
  • PWA with multiple pages
  • Unique Permutations - with exceptions
  • Criterion causing memory consumption to explode, no CAFs in sight
  • xtable - background colour of added rows
  • Find group of records that match multiple values
  • Center align outputs in ipython notebook
  • Django model inheritance, filtering models
  • How can I set a binding to a Combox in a UserControl?
  • Calling Worksheet functions from vba in foreign language versions of Excel
  • Does it make sense to call System.gc() and Thread.sleep() when working on Bitmaps?
  • Why Encoding.ASCII != ASCIIEncoding.Default in C#?
  • How to define and use opencv mat of user type
  • one Local Olampyad Questions on Informatic in 2011
  • MailKit: The IMAP server replied to the 'EXAMINE' command with a 'BAD' response
  • Cannot resolve symbol 'MyApi'
  • Display issues when we change from one jquery mobile page to another in firefox
  • Deselecting radio buttons while keeping the View Model in synch
  • Problems to linebreak with an int in JLabel
  • JSON with duplicate key names losing information when parsed
  • Adding custom controls to a full screen movie
  • Jquery - Jquery Wysiwyg return html as a string
  • Calling of Constructors in a Java
  • Matrix multiplication with MKL
  • KeystoneJS: Relationships in Admin UI not updating
  • log4net write single file for each call to log.info
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • -fvisibility=hidden not passed by compiler for Debug builds
  • How can I remove ASP.NET Designer.cs files?
  • Converting MP3 duration time
  • Net Present Value in Excel for Grouped Recurring CF