F3 changes relative URi of css files

Question

I am a newb experimenting with F3. My sample app is basically working but references to css files get changed and result in not being found. It looks like a .htaccess problem but I can't seem to fix it.

My css files are specified as

<link rel="stylesheet" href="ui/css/base.css" type="text/css" />
<link rel="stylesheet" href="ui/css/theme.css" type="text/css" />
<link rel="stylesheet" href="lib/code.css" type="text/css" />

My .htaccess file looks like

RewriteBase /blog/

RewriteCond %{REQUEST_URI} \.ini$
RewriteRule \.ini$ - [R=404]

RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php [L,QSA]
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]

This is in /blog under doc root and /ui and /lib are directories in /blog

Somehow the css files get referenced as /blog/view/ui/css when accessing a route template ('view' is the route name) I don't understand why this reference gets changed. Can you help?

Answer 1

It's because you're referencing your CSS files relatively. Either you add a "/" like the following

<link rel="stylesheet" href="/lib/code.css" type="text/css" />

or you use F3's internal variable to determine the base path which might be better if your app is inside a subdirectory. Thus you should write the following in your template (at least if you're using the Template class)

<link rel="stylesheet" href="{{@BASE}}/lib/code.css" type="text/css" />