'CSS not applying if using PHP

I am using codeigniter and any data that is within the for loop doesn't have the CSS applied. The file is pointed correctly as all the other css works fine, however I can't find a solution to this anywhere

HTML :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE = html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('/assets/css/home.css')?>">
     <title>Spill.It</title>

</head>
<body>
    <header>
    <div id="gifLogo">
        <img src="<?php echo base_url('/assets/images/homelogo.gif')?>" width="100%" alt="Spill.It Logo">
     </div>
     </header>
<!-- Foreach loop to print all messages from the user. -->
<?php foreach ($messages as $row): ?>
    <div id=messageDisplay>
    <?php if ($row->user_username == null){
        echo '<p>Nothing has been spilt here yet sorry!</p>';
        }?>
    <h1><?php echo $row->user_username;?> : </h1><p><?php echo $row->text;?></p>
    <p id="time"> Posted At :<?php echo $row->posted_at;?></p>

    </div>  
<?php endforeach ?>
</div>
</body>
</html>

CSS (I haven't included all the css just the parts within the loop as my css file is very messy) :

#messageDisplay {
    text-align: center;
    padding-left: 10em;
    padding-right: 10em;
    border: 1px solid #4099ff;
    border-radius: 6px;
    box-shadow: 0 0 8px #4099ff;
    margin: 20px;
padding: 5px;   
}
#time {
    font-size: 2px;
}
phpcsscodeigniter


Solution 1:[1]

Missing quotes after id , change it to 

<div id="messageDisplay">

Please use classes if you need to design more than one element using same CSS. ID's in a DOM must be unique

Solution 2:[2]

Doctype should change like this:

<!DOCTYPE html>

Loading CodeIgniter assets should be like:

href="<?php echo base_url() ;?>assets/css/home.css"

So folder structure would be:

application
assets
    - css
        - home.css
system
index.php
.htaccess

And in body:

  1. wrap id or class with ' or "

  2. check out your tag open and close (because there is extra </div> in your code)

    <body>
    <header>
        <div id="gifLogo">
            <img src="<?php echo base_url(); ?>assets/images/homelogo.gif" width="100%" alt="Spill.It Logo">
        </div>
     </header>
    <!-- Foreach loop to print all messages from the user. -->
    <?php foreach ($messages as $row): ?>
        <div id= "messageDisplay">
            <?php 
            if ($row->user_username == null)
            {
                echo '<p>Nothing has been spilt here yet sorry!</p>';
            }
            ?>
            <h1><?php echo $row->user_username;?> : </h1><p><?php echo $row->text;?></p>
            <p id="time"> Posted At :<?php echo $row->posted_at;?></p>
        </div>  
    <?php endforeach ?>
    <!-- </div> -->
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tushar
Solution 2 halfer

Related Questions