css problem in action on Zend Framework

Question

Not sure what I'm doing wrong here, but it seems that the framework is only able to find the style.css on my index actions on every controller. I'm calling it from the layout.phtml like this:

$this->headLink()->appendStylesheet('css/styles.css');

So when I go to project.local/account, I find the styles. If I go to project.local/account/action there are no styles...and actually if I go to project.local/account/index...there are no styles. So... it's a bit of a weird error, or at least it is for a n00b

Edit: When I open the code console on firefox and try to follow the css/styles.css I find the following error message:

<pre>#0 /home/fiodorovich/library/ZendFramework/library/Zend/Controller/Action.php(515): Zend_Controller_Action->__call('cssAction', Array)
#1/home/fiodorovich/library/ZendFramework/library/Zend/Controller/Dispatcher/Standard.php(295): Zend_Controller_Action->dispatch('cssAction')
#2 /home/fiodorovich/library/ZendFramework/library/Zend/Controller/Front.php(954): Zend_Controller_Dispatcher_Standard->dispatch(Object(Zend_Controller_Request_Http), Object(Zend_Controller_Response_Http))
#3 /home/fiodorovich/library/ZendFramework/library/Zend/Application/Bootstrap/Bootstrap.php(97): Zend_Controller_Front->dispatch()
#4 /home/fiodorovich/library/ZendFramework/library/Zend/Application.php(366): Zend_Application_Bootstrap_Bootstrap->run()
#5 /home/fiodorovich/public_html/gisele/public/index.php(26): Zend_Application->run()
#6 {main}  </pre>

  <h3>Request Parameters:</h3>
  <pre>array (
  'controller' =&gt; 'gisele',
  'action' =&gt; 'css',
  'module' =&gt; 'default',
)  </pre>

Answer 1

The parameter you pass to appendStylesheet is just being blindly output in your HTML, the framework's not actually looking for that file.

The reason this is working on some pages and not others is that you've given appendStylesheet a relative link. Basically, when a browser encounters a relative link, it strips off the current URL at the last slash and then adds on the link.

So, on project.local/account, the browser is looking for the CSS at project.local/css/styles.css, but on project.local/account/action, the browser is looking for the CSS at project.local/account/css/styles.css.

Long story short, add a leading slash to your parameter, which will make it into a root-relative link that will resolve to the same location on all pages:

$this->headLink()->appendStylesheet('/css/styles.css');

As pointed out by Phil in a comment, the above example only works as long as your ZF application is installed in the root of the site (as in this case). Using the BaseUrl helper will output the correct path regardless of where the site is located in the site hierarchy.

$this->headLink()->appendStylesheet($this->baseUrl('css/styles.css'));