CSS not applying if using PHP

Question

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;
}

You should not use IDs for elements that repeat because IDs should be unique to one element in a document, use classes instead. Also I’m not sure where PHP is involved but if you generate your CSS with PHP, make sure you serve the CSS with the correct content-type header. — Raphael Schweikert
– Raphael Schweikert, Commented Oct 22, 2016 at 20:10

BugHunter · Accepted Answer · 2016-10-22 20:16:38Z

1

In your code you are repeating the CSS IDs. CSS ID can be used once in the whole page as IDs must be unique.

You should use classes instead.

CSS

.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;
 }

PHP

 <div class="messageDisplay"> </div>

answered Oct 22, 2016 at 20:16

BugHunter

1,2042 gold badges10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar Gupta · Accepted Answer · 2016-10-22 20:12:11Z

0

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

answered Oct 22, 2016 at 20:12

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

Comments

halfer · Accepted Answer · 2022-03-06 16:44:28Z

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:

wrap id or class with ' or "

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>

Collectives™ on Stack Overflow

CSS not applying if using PHP

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related