Missing CSS Elements from Linked Stylesheet

Viewed 38

I have a simple table which I am trying to right-align the inputs in. The issue I am having is getting the input property to apply the right-align attribute I've included in the CSS file. When I view the CSS file in the Chrome data inspector it shows only the .table-responsive attribute and not the input or table attributes. If I manually type the attributes in the chrome inspector they apply so I do not think it is my structure.

I'm wondering why only the .table-responsive attribute is showing and not the others? I've read it may be a formatting error, but I am having trouble finding out where my formatting might be going wrong.

I am using bootstrap and a bootstrap theme, just in case that might matter.

CSS

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

input {
    text-align: right;
}

.table-responsive {
    display: contents;
}

Chrome Inspector CSS

.table-responsive {
    display: contents;
}

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style/Journalize.css" />

        <title>Journalize</title>
    </head>

</html>
    <body>
        <br/>
        <h2>Journalize</h2>
        <form action="" method="post">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <table border="1" class="table-responsive table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Transaction ID</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Account</th>
                                <th>Debit</th>
                                <th>Credit</th>
                                <th>User</th>
                            </tr>
                        </thead>
                        <?php retrieveJournal(); ?>

PHP

function retrieveJournal() {
        ...
            echo '<tr align="center">';
                echo '<td> <span>' .$row['transaction_id']. '</span> </td>';
                echo '<td> 
                        <select name="status[]">
                            <option '.$approvedStatus.'>Approved</option>
                            <option '.$pendingStatus.'>Pending</option>
                            <option '.$rejectedStatus.'>Rejected</option>
                        </select>
                    </td>';
                echo '<td> <input name="transactiondate[]" readonly value="' .$row['transaction_date']. '"> </td>';
                echo '<td> 
                        <select name="transactiontype[]">
                            <option '.$normalType.'>Normal</option>
                            <option '.$adjustingType.'>Adjusting</option>
                            <option '.$closingType.'>Closing</option>
                        </select>
                    </td>';
                echo '<td>
                        <input name="transactionaccount[]" readonly value="' .$accountRow['account_name']. '">
                        <br/>
                        <span>Description: </span><input name="description[]" value ="' .$row['description']. '">
                      </td>';
                echo '<td> <input name="debitAmount[]" readonly value="' .$row['debit_amount']. '"> </td>';
                echo '<td> <input name="creditAmount[]" readonly value="' .$row['credit_amount']. '"> </td>';
                echo '<td> <input name="user_id[]" readonly value="' . $usernameRow['username'] . '"> </td>';
            echo '</tr>';
        } 
    }
1 Answers

The reason the elements are not showing in the developer options, in sources is because your browser has cached the old version of the CSS file.

You can prevent the browser from loading cached files by adding a random version number on the end, for example:

<link rel="stylesheet" type="text/css" href="style/Journalize.css?v=<?= date("Ymd") . time(); ?>" />

Giving you an output of something that'll always be a new version so the browser cannot load old cached versions.

style/Journalize.css?v=201810271540661219
Related