Member Avatar for pucivogel

I'm trying to build an agenda website in php, have downloaded a free css, I have done all the necessary implementations on the index page , i mean have included som php scripts. When i load it from my browser it doesn't show the design, i mean the technical changes appear but not the css, no background images, menu background. Is there any compatibility error or what?
Any changes i make in the css file, doesn't show in the browser.

Edited by pucivogel
  • 4 Contributors
  • 9 Replies
  • 290 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by DDarren

Dani AI

Generated

Quick summary: the stylesheet link was being effectively disabled by a stray HTML comment that began before the page’s head block — once that comment was removed the CSS loaded and the design returned, as noted and confirmed. Earlier checks suggested by (verify the link) and (run a CSS checker) were also on the right track.

Practical troubleshooting checklist (use the browser dev tools):

  • View page source to ensure the stylesheet link actually appears in the head and is not inside an HTML comment.
  • Open the stylesheet URL directly in the browser and check the Network panel for HTTP status (200 vs 404/403) and the Content-Type.
  • Reload with cache disabled (hard refresh / Ctrl+F5) or append a version query (e.g., ?v=1) to bust cached CSS while testing.
  • Watch the Console for CSS parse errors — invalid declarations can cause later rules to be ignored.
  • Confirm background-image paths in the stylesheet are resolved relative to the stylesheet file (not the HTML file).
  • When developing on WAMP, always serve via ... (not file://) so PHP and relative paths behave as expected.

Notes on the posted stylesheet: there are a few syntax problems (missing semicolons, a quoted color token in a border declaration, and a nonstandard selector name) that can cause rules to be skipped. Using a validator/editor with syntax highlighting will catch stray HTML comments and CSS mistakes early. These steps prevent similar “CSS not showing” situations even after the initial comment bug is fixed.

Recommended Answers

All 9 Replies

Member Avatar for rotten69

Make sure you add the link to the CSS file. Show us your index page so we know what's exactly going wrong.

Member Avatar for JorgeM

If the site is online, you can provide us with the URL. That will be sufficient to inspect your code.

Member Avatar for pucivogel 
<?php
header('Content-type: text/html; charset=utf-8');
/* Auto load function for missing classes */

/* Check whether there is already an agenda installed, if not, move to the install script. */
// TODO install detection could be done better
if (!file_exists('config.inc.php')) {
    header('Location: install.php');
}

include ('auth/include/session.inc.php');
if (!$session->logged_in && !$allowGuestAccess) {
    header('Location: login.php');
    die();
}
// config.inc.php should be included by now
$dbNew = new DB($dbhost, $dbuser, $dbpass, $dbname);

include ('lang/lang.inc.php');
if (isset ($_SESSION['current'])) {
    $current = $_SESSION['current'];
} else {
    $now = time();
    $current = mktime(0, 0, 0, date("m", $now), date("d", $now), date("Y", $now));
    $_SESSION['current'] = $current;
}
/*
 * Rest of the includes
 */
include ('includes/functions.inc.php');
include ('includes/monthtable.inc.php');
include ('adodb/adodb.inc.php');
$db = ADONewConnection('mysql');
$db->Connect($dbhost, $dbuser, $dbpass, $dbname);
$db->debug = false;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Axhenda</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="header">
    <h1>Axhende</a></h1>

</div>
<!-- end header -->
<!-- star menu -->
<div id="menu">
    <ul>
        <li class="current_page_item"><a href="index2.php">Kreu</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Photos</a></li>
        <li><?php if ($session->isAdmin()) {
    echo ' <a href="auth/admin/admin.php">Admin Center</a>';
}
             ?></li>

        <li><?php if ($session->logged_in) {
    echo ' <a href="auth/process.php">' . $lang['logout'] . '</a>';
}           ?></li>
    </ul>
</div>
<!-- end menu -->
<!-- start page -->
<div id="page">
    <!-- start content -->
    <div id="content">
        <div class="post">
            <div class="title">
                <h2>Shto nje event te ri</h2>
                </div>
            <div class="box">
                <?php 
                if ($session->logged_in) {
    include ('includes/addevent.inc.php');
}
                ?>
            </div>

        </div>

`So this is the index file, (up to where i'm interested, i haven't posted the whole code of index.
Below is the default. css

body {
    margin: 0;
    padding: 0;
    background-color:#66CCFF;
    background-repeat:repeat-x;
    font: 13px Georgia, "Times New Roman", Times, serif;

}

form {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

input, textarea {
    font: normal 1em Georgia, "Times New Roman", Times, serif;
}

h1, h1 a, h2, h2 a, h3, h3 a {
    margin: 0;
    text-decoration: none;
    color: #333333;
}

h1 {
    letter-spacing: -2px;
    font-size: 3.2em;
}

h2 {
    letter-spacing: -1px;
    font-size: 2em;
}

h3 {
    margin-bottom: 1em;
    font-size: 1em;
}

p, ol, ul {
    margin: 0 0 2em 0;
    line-height: 200%;
}

blockquote {
    margin: 0 0 0 2.5em;
    padding-left: 1em;
    border-left: 5px solid #16B1B0;
}

a {
    color: #16B1B0;
}

a:hover {
    text-decoration: none;
}

images {
    border: none;
}

/* Header */

#header {
    width: 770px;
    height: 100px;
    margin: 0 auto;
}

#header h1, #header p {
    margin: 0;
}

#header h1 {
    float: left;
    padding: 34px 0 0 0;
}

#header p {
    float: right;
    padding: 42px 0 0 0;
    font-size: 1.8em;
}

#header a {
    text-decoration: none;
    color: #333333;
}

/* Menu */

#menu {
    width: 770px;
    height: 65px;
    margin: 0 auto;
    background: url(images/img02.jpg) no-repeat;
}

#menu ul {
    margin: 0;
    padding: 7px 0 0 0;
    list-style: none;
}

#menu li {
    display: inline;
}

#menu a {
    padding-right: 30px;
    text-decoration: none;
    letter-spacing: -1px;
    font-size: 1.2em;
    font-weight: bold;
    color: #333333;
}

#menu a:hover {
    text-decoration: underline;
}

/* Page */

#page {
    width: 770px;
    margin: 0 auto;
    background: url(images/img05.gif);
}

#extra {
    background: url(images/img06.gif) no-repeat left bottom;
}

/* Content */

#content {
    float: left;
    width: 530px;
    background: url(images/img03.gif) no-repeat;
}

.post {
    padding: 40px 40px 0 40px;
}

.post ol, .post ul {
    list-style-position: inside;
}

.post .title {
}

.post .title h2 {
}

.post .title p {
}

.post .title p a {
}

.post .entry {
}
.box {
  margin: 0.6em 0.6em 0.3em 0.6em;
  padding: 0.6em 0.6em 0.6em 0.6em;
  background-color: transparent
  border: solid 1px '#ccc'
  -moz-border-radius: 8px 8px 8px 8px;

}

.post .links {
    padding: 2px 20px;
    background: #CDFAFB;
    text-align: right;
}

.post .links a {
    text-decoration: none;
    font-weight: bold;
    color: #0B8785;
}

.post .links a:hover {
    text-decoration: underline;
}

.post .links .more {
}

.post .links .comments {
}

/* Sidebar */

#sidebar {
    float: right;
    width: 240px;
    background: url(images/img04.gif) no-repeat;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar li {
}

#sidebar li ul {
    padding: 20px;
}

#sidebar li li {
    font-size: .85em;
}

#sidebar h2 {
    height: 33px;
    padding: 4px 0 0 10px;
    background: url(images/img07.jpg) no-repeat;
    font-size: 1.6em;
}

/* Search */

#searchform {
    padding: 20px;
}

#search h2 {
    background: url(images/img08.jpg) no-repeat;
}

#search #x {
}

#search #s {
    width: 120px;
}

#search br {
}

/* Calendar */

#calendar_wrap {
    padding: 20px 25px 20px 20px;
}

#calendar table {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #16B1B0;
    text-align: center;
}

#calendar thead {
    background: #16B1B0;
    color: #FFFFFF;
}

#calendar tbody td {
    background: #FFFFFF;
    border: 1px solid #BCF8FA;
}

#calendar #prev {
    text-align: left;
}

#calendar #next {
    text-align: right;
}

#calendar tfoot a {
    text-decoration: none;
    font-weight: bold;
}

#calendar #today {
    background: #BCF8FA;
    border: 1px solid #16B1B0;
    font-weight: bold;
    color: #16B1B0
}

/* Footer */

#footer {
    clear: both;
    width: 950px;
    margin: 0 auto;
    padding: 30px 0;
    background: url(images/img11.gif) no-repeat;
}

#footer p {
    margin: 0 0 5px 0;
    text-align: center;
    line-height: normal;
    font-size: .9em;
}

#footer a {
    text-decoration: none;
}
Member Avatar for pucivogel

I want it to be like this :
I'm using wamp. What i get on chrome is very plain, the menu bulleted, vertically, then the add event box, the wholebackground white.

Member Avatar for JorgeM

In line 47 of your code, you reference the external style sheet. Is this the correct name you saved your CSS file as, and also you indicate that the style sheet is in the same folder location as your index.html file. Is that correct?

Member Avatar for pucivogel

yes, that's right.

Member Avatar for JorgeM

Ok, I missed the fact that you have starting comment tags on line #38. I took the information you had and tried to rebuild an HTML file and when the comments tags are removed, your page is styled.

If you have this online, it is easier for others to help you debug the HTML, CSS, and JavaScript portions because we can then see the actual HTML output from the web server.

Member Avatar for pucivogel

Omg! thank you so much. Can't believe it wouldn't run properly just for that little thing.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.