CodeIgniter CSS File Not Included

StackOverflow https://stackoverflow.com/questions/4565609

  •  14-10-2019
  •  | 
  •  

Question

I have a bit of an odd problem with my CodeIgniter installation, I am using modrewrite in order to shorten my URLs, for example I have an api page:

http://www.mydomain.com/api

And it works really well, my .htaccess file looks like this:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php?/$1 [L]

But whats really strange is if I type a trailing slash:

http://www.mydomain.com/api/

The API page loads ok but it doesn't include the Base CSS file which is included on all the pages, it would be fine if it didn't load anything at all, but I need to stop it from loading the actual api page. Any advice would be helpful,

Thanks!

UPDATE: I have found that when I view source my CSS file comes from the following when the CSS loads correctly:

http://www.mydomain.com/css/all.css

But when it fails to load it comes from

http://www.mydomain.com/api/css/all.css

Was it helpful?

Solution

Make sure that you have a trailing slash in your base_url in the config.php file: 

$config['base_url'] = "http://www.mydomain.com/";

And always call the base_url() when dealing with links...etc 

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/all.css">

EDIT:
Please note that I'm using the mod_rewrite from this wiki page BUT since my CI installation in not on the root (inside /ci173/) the RewriteBase is not / but /ci173/.

OTHER TIPS

When using relative URL path like css/all.css or ./css/all.css (both are equivalent), you need to be aware that relative URL paths (like any relative URLs) are resolved using a base URL that is the URL of the current document if not specified otherwise.

So in your case /api or /api/ is the base URL path and the relative URL path css/all.css is resolved differently depending on the base URL path:

  • /api + css/all.css → /css/all.css
  • /api/ + css/all.css → /api/css/all.css

To conquer this you either need to

  • use absolute URL paths like /css/all.css that are independent from the base URL path
  • specify a different base URL in your HTML document (e.g. /); but note that this will affect all relative URLs and not just relative URL paths
  • adjust your relative URL paths to suite your base URL paths:
    • for /api use css/all.css
    • for /api/ use ../css/all.css
    • for /api/foo/bar/ use ../../../css/all.css, etc.

I guess the first solution is the easiest.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top