External CSS file is not loading in the browser
So first of all, I want to preface by saying I am very new to programming so forgive me if I don't follow as quickly.
Now, I am having a problem that is really bothering me for the last few days and I have searched everywhere for a solution.
I am using a WAMP server configuration. Everything has been working fine until I started working with CSS. I have an external CSS file.
When I view my HTML page in Dreamweaver, I see that it is properly connecting to that CSS file. I can see the styles being applied in the Design view. However, when I view the page in the browser, Firefox says (in Error Console) that the .css file cannot be loaded because its MIME type is text/html and not text/css.
So I figured this was a server configuration problem. What I did was the following: I went into the .HTACCESS file and added the following line: AddType text/css .css
After restarting my server, this still did not solve the problem. For some reason, the browser keeps reading my css file as an html file. Any idea what could possibly going wrong here?
Here's the head of the file I'm trying to load in the browser (it's actually a Smarty template):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../htdocs/css/styles.css" type="text/css" media="all" />
</head>
Also, please note that I am coding using a Zend framework. Here is my .HTACCESS file:
RewriteEngine on
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1
AddType text/css .css
So I took the advice of DA and clicked on View Page Source when viewing the page in browser and clicked on the link to my CSS file. This is what it shows me:
When I click on link, I see this:
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Fatal error: Uncaught exception 'Zend_Controller_Dispatcher_Exception' with message 'Invalid controller specified (error)' in C:\shaancode\www\phpweb20\htdocs\Zend\Controller\Dispatcher\Standard.php on line <i>248</i></th></tr>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Zend_Controller_Dispatcher_Exception: Invalid controller specified (error) in C:\shaancode\www\phpweb20\htdocs\Zend\Controller\Dispatcher\Standard.php on line <i>248</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0006</td><td bgcolor='#eeeeec' align='right'>382488</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\shaancode\www\phpweb20\htdocs\index.php' bgcolor='#eeeeec'>..\index.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0892</td><td bgcolor='#eeeeec' align='right'>4748936</td><td bgcolor='#eeeeec'>Zend_Controller_Fr开发者_高级运维ont->dispatch( )</td><td title='C:\shaancode\www\phpweb20\htdocs\index.php' bgcolor='#eeeeec'>..\index.php<b>:</b>42</td></tr>
</table></font>
href="../htdocs/css/styles.css"
The htdocs directory is usually the webroot. So, while this is a perfectly good path on your local file system, once you access it through a webserver the ../ is ignored because you are in the top of the local part already. Then there is no htdocs so the rest of the path should 404.
For some reason, Zend is sending out its "Invalid controller specified (error)" (meaning "I can't find what I've been asked for" with a 200 OK status code, so the browser is saying "This is an HTML document" instead of "Nothing was found there".
Remove the ../htdocs/ part from the URL.
You may be using CSS probably by using <link rel=stylesheet href="cssName.html">
This may be similar to the Mozilla Bug. Please share you code so that we can provide better suggestions.
The problem here can be two fold. Either the CSS file is missing and your system is serving up a 404 page (if you've configured it) so the browser is complaining that it's not a CSS file.
Or the problem could be that you have a server configuration issue. If it's a new installation of WAMP, this is pretty unlikely.
Have you tried accessing the file directly?
- View the source in Firefox (or any browser)
- click on the CSS link you've made. If you can't click on it you may have to copy paste it in a new window.
- Does it take you to the CSS file or some other file?
If it takes you to another file that means you haven't linked it properly. You may be better off using an absolute path (from your webroot) rather than a relative path.
EDIT : Using stylesheets in Zend Framework
Assuming your CSS files are in ZF/public/css, you would include them in your layout or view like this
$this->headLink()->appendStylesheet('/css/styleForThisPage.css'); // in your view
Designate an area for it to be printed out (in your layout)
echo $this->headLink()
However, if it's a sitewide css file and you want to include your CSS only in the layout, then simply echoing it out will suffice
echo $this->headLink()->appendStylesheet('/css/global.css');
Thanks for the help everyone! A lot of you were right, it ultimately had to do with the href path. So, I was able to fix the error, but it seems the solution was simple and the problem silly!
In Dreamweaver, I did not define the Site Root folder!! This was causing a problem because I was using a relative path, but it wasn't finding it correctly ultimately because the Site Root wasn't defined!
So I set the Site Root in Dreamweaver to my Root directory (where .HTACCESS is located) and changed the path to simply "/css/styles.css".
And now it works!
Sorry to trouble everyone and thank you all for your help!
加载中,请稍侯......
精彩评论