3

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 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?

wantTheBest
  • 1,682
  • 4
  • 43
  • 69
  • 1
    Unfortunately I had to solve this problem myself using a Google search--it wasn't fun! So it's good to have this for reference on SO. – Purag Feb 14 '12 at 07:13
  • Thanks Purmou, the format I used was -- and this solved my problem for typing my site's URL with no arguments at the end and also for typing my site's URL with '/' or with arguments such as '/foo' at the end -- thanks. – wantTheBest Feb 14 '12 at 08:10
  • The `base` tag doesn't even require the closing tag. ;) Glad I could help. – Purag Feb 14 '12 at 08:15

4 Answers4

4

You could also use the <base> tag in the head section:

<base href="base/path/for/files/to/follow">

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).

Purag
  • 16,941
  • 4
  • 54
  • 75
  • I found that 2 things worked: either the base with the full http://locahost/mysite/ path, or by specifying -- thanks, I learned about here. – wantTheBest Feb 14 '12 at 07:59
3

Because you are using a relative path to access the file, so when there are extra "directories" at the end of the URL, it tries to start in whatever directory because the browser doesn't know any better (that you rewrote the request path). Try changing it too:

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

Using an absolute path will keep it directing to the exact location of your CSS file, no matter what your URL might be.

For example: /index.php/foo will actually treat index.php as a directory and then foo as a sub-directory of index.php, making the path the browser tries to find your CSS file at: /index.php/foo/globalStyles.css.

animuson
  • 53,861
  • 28
  • 137
  • 147
  • If I change href="globalStyles.css" to href="/globalStyles.css" then type in mysite/index.php the CSS styles are gone. And index.php and globalStyles.css are in the same folder. If I change it to href="./globalStyles.css" then my CSS styles are back, fine. But neither of these changes, not the inclusion of '/' nor './' fixed the problem of 'index.php/someArbitraryText. – wantTheBest Feb 14 '12 at 07:30
  • The only absolute path that allows me to type mysite.com/index.php/foo, or in the base-case as I discovered, mysite.com/index.php/ -- the only absolute path that retains my CSS styles when I add '/' or '/foo' at the end of the URL is this: href="../globalStyles.css". But that change causes a new problem -- if I type mysite.com/index.php, with no '/' and no '/foo' arguments -- my CSS styles vanish on index.php. – wantTheBest Feb 14 '12 at 07:40
  • +1, thanks, this got me started re-thinking paths - thanks for your advice. – wantTheBest Feb 14 '12 at 08:09
2

Use absolute paths rather than relative paths.

HellaMad
  • 5,294
  • 6
  • 31
  • 53
2

Inside the following page:

www.mysite/index.php/foo

the following tag:

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

instructs the browser to look for a file called:

www.mysite/index.php/globalStyles.css

Obviously it isn't there. You should use absolute paths in your case:

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

Note that this could lead to another problem: the browser's request for:

www.mysite/globalStyles.css

might get converted/redirected by mod_rewrite to:

www.mysite/index.php/globalStyles.css

You should adjust your re-write rules to ignore .css, .js, .gif (etc) files. Alternately, use the RewriteCond's -f flag to make sure that file does not exist, then rewrite.

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • +1 Really informative, thanks, right now mod_rewrite is new for me and I appreciate the admonition regarding RewriteConds -- have not yet used them, good to know about if this comes up - thanks. – wantTheBest Feb 14 '12 at 08:08