why is css style not applied at localhost?

Problems with the Windows version of XAMPP, questions, comments, and anything related.

why is css style not applied at localhost?

Postby LizzyFin » 19. October 2007 19:54

Hello All!
I have set up XAMPP on Vista Home Premium which I'm using to create php pages and test them locally - but have an issue with the css styles not being applied.

I'm not sure what is going on here - any ideas?

When I browse to http://localhost/chart.php/ (with Fx or IE) I get the correct php page output, but it is unstyled. I obviously need the styles to work locally via a browser for testing purposes.

When I browse to file:///c:/xampp/htdocs/chart.php I get the page and it is styled so I know the right style sheet is available to the browser, however none of the queries work.

Commenting/uncommenting
# EnableSendfile off
# EnableMMAP off
did not affect the output after restarting Apache.

Any insight is greatly appreciated as to why I can't see the css styles at the localhost page.
Liz AT
computeraxe.com
LizzyFin
 
Posts: 9
Joined: 19. October 2007 19:07
Location: Pennsylvania

Postby Wiedmann » 20. October 2007 09:31

but have an issue with the css styles not being applied.

You are using an external style sheet? How did you include the css file exactly?
Wiedmann
AF Moderator
 
Posts: 17106
Joined: 01. February 2004 12:38
Location: Stuttgart / Germany

Postby LizzyFin » 20. October 2007 10:55

Yes, I linked to an external stylesheet like so,

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

where style_goals.css is at this location: c:/xampp/htdocs/chart.php.

Thanks for looking!
Liz AT
computeraxe.com
LizzyFin
 
Posts: 9
Joined: 19. October 2007 19:07
Location: Pennsylvania

Postby Izzy » 20. October 2007 11:40

The CSS link is an HTML tag and should be outside of your php code defined by <?php ?>

so it would look like this:

Code: Select all
<html>
<head>
<link href="style_goals.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php some php code here ?>
</body>
<html>


Get the idea?

You can find many different examples in the xampp\htdocs\xampp directory which may help.
For instance components.php has a mixed example of html and php:
Code: Select all
<?php
   include "langsettings.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta name="author" content="Kai Oswald Seidler, Kay Vogelgesang">
      <link href="xampp.css" rel="stylesheet" type="text/css">
      <title></title>
   </head>

   <body>
      &nbsp;<br>
      <h1><?php echo $TEXT['components-head']; ?></h1>

      <?php echo $TEXT['components-text1']; ?><p>
      <?php echo $TEXT['components-text2']; ?><p>

      <?php include "softwarelist.inc"; ?>

      <p>
      <?php echo $TEXT['components-text3']; ?>

      &nbsp;<p>&nbsp;<p>&nbsp;<p>
      &nbsp;<p>&nbsp;<p>&nbsp;<p>
   </body>
</html>



I hope this helps and if this is what you have done already then please excuse my intrusion.


===========================================
Take a look at the new DeskTopXampp launch control for XAMPP
and XAMPPlite (DTX.exe) posted by ridgewood:
http://community.apachefriends.org/f/viewtopi ... 967#103967
Available at Ridgewood's new DTX web site http://zedfiles.com/DTX/
Also available here: http://nat32.com/dtx/
I highly recommend DTX.
============================================
Izzy
 
Posts: 3344
Joined: 25. April 2006 17:06

Postby LizzyFin » 20. October 2007 11:59

Thanks Izzy! No intrusion felt here!

I do have the <link> statement in the head section of the html. The php page works fine as the output is what I a seeking except for the css styling of it. I get a black and white long column of output instead of a page with css-applied divs and pretty colors and such.

:?
Liz AT
computeraxe.com
LizzyFin
 
Posts: 9
Joined: 19. October 2007 19:07
Location: Pennsylvania

Postby Wiedmann » 20. October 2007 12:28

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

where style_goals.css is at this location: c:/xampp/htdocs/chart.php.

a) the location is "c:/xampp/htdocs" (without "chart.php")? Or did you really have a directory "c:/xampp/htdocs/chart.php/"?

b) Can you load the css file in your browser with: http://localhost/style_goals.css?
Wiedmann
AF Moderator
 
Posts: 17106
Joined: 01. February 2004 12:38
Location: Stuttgart / Germany

Postby LizzyFin » 20. October 2007 12:50

Wiedmann, thank you for helping.

a - The location was without chart.php, my mistake.

b- Using this path (http://localhost/style_goals.css) in linking the css file worked perfectly! Would that be called the "absolute" path?

Thank you once again!!
:D
Liz AT
computeraxe.com
LizzyFin
 
Posts: 9
Joined: 19. October 2007 19:07
Location: Pennsylvania

Postby Wiedmann » 20. October 2007 13:02

b- Using this path (http://localhost/style_goals.css) in linking the css file worked perfectly!

Hm, you have now changed the <link> tag in your file? Because my question was just open the css file in your browser. (putting "http://localhost/style_goals.css" in the address bar)
Wiedmann
AF Moderator
 
Posts: 17106
Joined: 01. February 2004 12:38
Location: Stuttgart / Germany

Postby LizzyFin » 20. October 2007 13:27

Putting this link in the head worked:

<link href="http://localhost/style_goals.css" rel="stylesheet" type="text/css" />

Would you expect it not to work? I have always used relative links in a link statement before trying this here.
Liz AT
computeraxe.com
LizzyFin
 
Posts: 9
Joined: 19. October 2007 19:07
Location: Pennsylvania

Postby Wiedmann » 20. October 2007 13:32

Putting this link in the head worked:

Once more:
With just using this URI ("http://localhost/style_goals.css") in your browser, you can see the css file in your browser (or the browser want download this file)?
Wiedmann
AF Moderator
 
Posts: 17106
Joined: 01. February 2004 12:38
Location: Stuttgart / Germany

Postby LizzyFin » 20. October 2007 13:55

With just using this URI ("http://localhost/style_goals.css") in your browser, you can see the css file in your browser (or the browser want download this file)?


Yes, I see the listing of my css file directly in the browser window.
Liz AT
computeraxe.com
LizzyFin
 
Posts: 9
Joined: 19. October 2007 19:07
Location: Pennsylvania

Postby Wiedmann » 20. October 2007 14:01

OK, a summarization:

The files "style_goals.css" and "chart.php" are in the same directory ("c:/xampp/htdocs/").

The directory "c:/xampp/htdocs/" is your DocumentRoot.

You can load the file "style_goals.css" with "http://localhost/style_goals.css".

You can load the file "chart.php" with "http://localhost/chart.php".

Correct?
Wiedmann
AF Moderator
 
Posts: 17106
Joined: 01. February 2004 12:38
Location: Stuttgart / Germany

Postby LizzyFin » 20. October 2007 14:17

Yes, that is correct.

When I load the file "chart.php" with "http://localhost/chart.php" I now get a styled page because I changed the link statement from a relative address to an "absolute" address like so:

new/working css link in head -

<link href="http://localhost/style_goals.css" rel="stylesheet" type="text/css" />

old/not-working css link in head -

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

The old link to style gave a black text on white background output.
Liz AT
computeraxe.com
LizzyFin
 
Posts: 9
Joined: 19. October 2007 19:07
Location: Pennsylvania

Postby Wiedmann » 20. October 2007 14:58

That's curious. Because if both files are stored in the same directory and you load the script with "http://localhost/chart.php", there is no difference between:
Code: Select all
<link href="style_goals.css" rel="stylesheet" type="text/css" />

and
Code: Select all
<link href="http://localhost/style_goals.css" rel="stylesheet" type="text/css" />



OK, if you open "chart.php" with the not-working css link in head and you do in your browser a "show source code", can you see the correct link tag and is the page valid xhtml (use a html validator)?
Wiedmann
AF Moderator
 
Posts: 17106
Joined: 01. February 2004 12:38
Location: Stuttgart / Germany

Postby LizzyFin » 21. October 2007 13:48

Very curious!

OK, if you open "chart.php" with the not-working css link in head and you do in your browser a "show source code", can you see the correct link tag and is the page valid xhtml (use a html validator)?


Yes and yes.
Liz AT
computeraxe.com
LizzyFin
 
Posts: 9
Joined: 19. October 2007 19:07
Location: Pennsylvania

Next

Return to XAMPP for Windows

Who is online

Users browsing this forum: DrSeussFreak and 70 guests