Error page styles not loading

Question

I was attempting to customize Magento's 503 and Maintenance error pages (404 is set up and works fine), but Magento can't load the stylesheets for the error pages.

If I put Magento in maintenance mode, or force some kind of DB error, it does load the appropriate page, but when it attempts to load css/styles.css that page, too, returns the error page instead if the css file.

How can I fix this?

Edit:

My folder structure, as requested

errors/
errors/404.php
errors/503.php
errors/design.xml
errors/local.xml
errors/processor.php
errors/report.php
errors/default/
errors/default/404.phtml
errors/default/503.phtml
errors/default/page.phtml
errors/default/report.phtml
errors/default/css/styles.css
errors/default/images/

I use maintenance.flag to force Magento to give me an error page. It tries to load http://localhost/css/styles.css but that returns a 503, so I get an unstyled error page.

If I access http://localhost/errors/default/css/styles.css I get the Magento error page, but it is styled (its able to load stylesheets). Loading any random url starting with the path http://localhost/errors/default/ loads the error page correctly, so it seems to have something to do with how magento is building the error pages...

Answer 1

First of all make sure that you customized error pages in proper way.

Follow simple steps:

1. Go to /errors and create new folder for example custom.
2. Copy /errors/default content into /errors/custom.

3. Edit /errors/design.xml and set custom skin

   <config>
       <skin>default</skin>
   </config>
   

Now customize html files in /errors/custom end styles in /errors/custom/styles.css.

If you want to access your styles through browser http://localhost/errors/custom/styles.css

Also I recommend you to read this article.