My CSS styles stop working if I type any argument following my landing page index.php
I’m adding/testing new code on my development localhost server running xampp, coding in php/javascript/html/css.
EDIT: my development server is Windows Vista, and I use Firefox version 10.0.1 right now.
Today I was adding mod_rewrite support to allow passing an argument with the URL for my site
and stumbled on a problem I’d not thought to test before.
The mod_rewrite I was developing allows the user to specify a text string after the site name, such as:
http://www.mysite.com/Stonehenge-artifact1
and my mod_rewrite processes that argument and does something meaningful — specifically, it redirects from my landing page index.php to a totally different page that displays a photo of Stonehenge-artifact1.
The problem — if the user types http://www.mysite.com/index.php/ialkselasdfa
all my CSS styles disappear — the index.php landing page special fonts and colors in my CSS stylesheet go missing.
I backed out all my mod_rewrite changes, including completely removing my custom .htaccess file in the mysite.com folder space (using a local custom copy of .htaccess is one of the steps for mod_rewrite).
I wanted to see if the CSS styles would disappear now that I was back to yesterday’s (pre-mod_rewrite changes) code. Sure enough, my CSS stylesheet goes AWOL if I type an argument, ANY argument, after index.php.
So the following URLs (for example) somehow disable my CSS stylesheet for index.php
www.mysite/index.php/foo
www.mysite/index.php/css-whereAreYou
(NOTE: the reason I brought up the mod_rewrite is to explain why I’m typing something at the end of my site’s URL in the first place. Were it not for me testing that new mod_rewrite code, I would not have found this problem.)
Here is my inclusion in my index.php of my CSS stylesheet:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="globalStyles.css" />
</head>
My globalStyles.css is:
root {
display: block;
}
body
{
color: black;
font-family: Gill, Helvetica, sans-serif;
font-size: 9pt;
background-color: RGB(243,239,240); /* light blue */
}
p
{
color: black;
}
Why is my index.php landing page not getting the CSS styles when I add characters after index.php?
You could also use the
<base>tag in the head section:What this does is tell the browser that the path specified is the root directory, and relative paths should be requested relative to said directory.
I encountered this same issue with
mod_rewrite(and, believe it or not, this solution came out of a Google search, though I had to dig a little).