I've constructed a form using php and echo this form in html page. I've defined a CSS for the html page however it is not working. I tried to save the source of the generated html page to a separate file with extension .html and when loaded, the CSS works! . I don't know what is wrong
THIS IS AN UPDATE The problem is solved. I put the absolute path of the CSS file instead. and it seems this issue happened (CSS was not found) because I'm using url rewriting to load the php file. the question now is: how do I troubleshoot such issues?
how do I know that the browser/server cannot find the CSS file?
ANOTHER UPDATE:
I found this link is very helpful Steps to troubleshoot CSS problems
Here is the php code
<?php
require_once 'constants.php';
$titles = get_title(FILE_NAME);
$htmlForm .= '<form method="post" action=' . '"' . htmlspecialchars($_SERVER["PHP_SELF"]) . '"' . '><fieldset><legend>This is my form</legend>';
for ($i = 0; $i < count($titles); $i++) {
$htmlForm .= '<p><label for="' . $titles[$i] . '">' . $titles[$i] . '</label><input type="text" id="' . $titles[$i] . '" value="' . $line[$i] . '"/></p>';
}
$htmlForm .= '<input type="hidden" name="mode" value="' . $_GET['mode'] . '">';
$htmlForm .= '<p class="submit"><input type="submit" name="submit" value="Submit"></p></fieldset></form>';
?>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<?php echo $htmlForm; ?>
<input name="newThread" type="button" value="Back to List View" onclick="window.location.href='/hshahin/cs5774/02-Project2/index';"/>
</body>
</html>
Here is the CSS script.
.submit input {
margin-left: 4.5em;
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
input {
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
fieldset {
border: 1px solid #781351;
width: 20em
}
legend {
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
clear your browser cache. The browser automatically caches the style sheet for quicker response time.
Use it and tell me how it goes. If it works, then path of your style sheet is wrong.
<?php
require_once 'constants.php';
$titles = get_title(FILE_NAME);
$htmlForm .= '<form method="post" action=' . '"' . htmlspecialchars($_SERVER["PHP_SELF"]) . '"' . '><fieldset><legend>This is my form</legend>';
for ($i = 0; $i < count($titles); $i++) {
$htmlForm .= '<p><label for="' . $titles[$i] . '">' . $titles[$i] . '</label><input type="text" id="' . $titles[$i] . '" value="' . $line[$i] . '"/></p>';
}
$htmlForm .= '<input type="hidden" name="mode" value="' . $_GET['mode'] . '">';
$htmlForm .= '<p class="submit"><input type="submit" name="submit" value="Submit"></p></fieldset></form>';
?>
<!DOCTYPE HTML>
<html>
<head>
<style>
.submit input {
margin-left: 4.5em;
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
input {
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
fieldset {
border: 1px solid #781351;
width: 20em
}
legend {
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
</style>
</head>
<body>
<?php echo $htmlForm; ?>
<input name="newThread" type="button" value="Back to List View" onclick="window.location.href='/hshahin/cs5774/02-Project2/index';"/>
</body>
</html>
Are the styles not applying to anything or only the parts that are echoed out by PHP? Perhaps the stylesheet isn't loading, try refreshing the page without cache.
Check the path for your style.css file. Is it located in the same location as the PHP file? What happens if you don't include the stylesheet, but instead type in the actual CSS?
Suggestions: Instead of
<?php
require_once 'constants.php';
$titles = get_title(FILE_NAME);
$htmlForm .= '<form method="post" action=' . '"' . htmlspecialchars($_SERVER["PHP_SELF"]) . '"' . '><fieldset><legend>This is my form</legend>';
for ($i = 0; $i < count($titles); $i++) {
$htmlForm .= '<p><label for="' . $titles[$i] . '">' . $titles[$i] . '</label><input type="text" id="' . $titles[$i] . '" value="' . $line[$i] . '"/></p>';
}
$htmlForm .= '<input type="hidden" name="mode" value="' . $_GET['mode'] . '">';
$htmlForm .= '<p class="submit"><input type="submit" name="submit" value="Submit"></p></fieldset></form>';
?>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<?php echo $htmlForm; ?>
<input name="newThread" type="button" value="Back to List View" onclick="window.location.href='/hshahin/cs5774/02-Project2/index';"/>
</body>
</html>
Try
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<?php
require_once 'constants.php';
$titles = get_title(FILE_NAME);
$htmlForm .= '<form method="post" action=' . '"' . htmlspecialchars($_SERVER["PHP_SELF"]) . '"' . '><fieldset><legend>This is my form</legend>';
for ($i = 0; $i < count($titles); $i++) {
$htmlForm .= '<p><label for="' . $titles[$i] . '">' . $titles[$i] . '</label><input type="text" id="' . $titles[$i] . '" value="' . $line[$i] . '"/></p>';
}
$htmlForm .= '<input type="hidden" name="mode" value="' . $_GET['mode'] . '">';
$htmlForm .= '<p class="submit"><input type="submit" name="submit" value="Submit"></p></fieldset></form>';
?>
<?php echo $htmlForm; ?>
<input name="newThread" type="button" value="Back to List View" onclick="window.location.href='/hshahin/cs5774/02-Project2/index';"/>
</body>
</html>
Also Instead of
<?php
require_once 'constants.php';
$titles = get_title(FILE_NAME);
$htmlForm .= '<form method="post" action=' . '"' . htmlspecialchars($_SERVER["PHP_SELF"]) . '"' . '><fieldset><legend>This is my form</legend>';
for ($i = 0; $i < count($titles); $i++) {
$htmlForm .= '<p><label for="' . $titles[$i] . '">' . $titles[$i] . '</label><input type="text" id="' . $titles[$i] . '" value="' . $line[$i] . '"/></p>';
}
$htmlForm .= '<input type="hidden" name="mode" value="' . $_GET['mode'] . '">';
$htmlForm .= '<p class="submit"><input type="submit" name="submit" value="Submit"></p></fieldset></form>';
?>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<?php echo $htmlForm; ?>
<input name="newThread" type="button" value="Back to List View" onclick="window.location.href='/hshahin/cs5774/02-Project2/index';"/>
</body>
</html>
TRY
<?
require_once 'constants.php';
$titles = get_title(FILE_NAME);
$htmlForm .= '<form method="post" action=' . '"' . htmlspecialchars($_SERVER["PHP_SELF"]) . '"' . '><fieldset><legend>This is my form</legend>';
for ($i = 0; $i < count($titles); $i++) {
$htmlForm .= '<p><label for="' . $titles[$i] . '">' . $titles[$i] . '</label><input type="text" id="' . $titles[$i] . '" value="' . $line[$i] . '"/></p>';
}
$htmlForm .= '<input type="hidden" name="mode" value="' . $_GET['mode'] . '">';
$htmlForm .= '<p class="submit"><input type="submit" name="submit" value="Submit"></p></fieldset></form>';
?>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<?php echo $htmlForm; ?>
<input name="newThread" type="button" value="Back to List View" onclick="window.location.href='/hshahin/cs5774/02-Project2/index';"/>
</body>
</html>
The problem is solved. I put the absolute path of the CSS file instead. and it seems this issue happened (CSS was not found) because I'm using url rewriting to load the php file.
I found this link is very helpful: Steps to troubleshoot CSS problems