CSS style doesn't apply when javascript code is executed

Question

I'm catching a GET request from another page with PHP and displaying all the info to the user with something that looks like this (Using bootstrap):

But I'm getting this:

I'm using the alternative syntax for control structures and works fine. But the CSS is not applied and I don't know why. This is the relevant code:

        <?php

        $transactionId = $_REQUEST['transactionId'];

        if ($_REQUEST['transactionState'] == 4 ):
            $estadoTx = "Transacción aprobada";
            ?>        

            <div class="container-fluid"> 
                        <ul>
                            <li class="row">
                                <span class="itemName" id="quantity_first_product">Estado de la transaccion: </span>
                                <p class="description"><span  id="state"></span></p>
                            </li>
                            <li class="row">
                                <span class="itemName" id="quantity_first_product">ID de la transaccion: </span>
                                <p class="description"><span  id="transactionID" ></span></p>       
                            </li>                            
                        </ul>
            </div>

            <script type="text/javascript">
                var transaction_state;
                var transactionState_span = document.getElementById("state");
                transaction_state = <?php echo json_encode($estadoTx); ?>;
                transactionState_span.innerHTML = transaction_state;

                var transaction_id;
                var transactionID_span = document.getElementById("transactionID");
                transaction_id = <?php echo json_encode($transactionId); ?>;
                transactionID_span.innerHTML = transaction_id;
            </script>

         <?php else:
            $estadoTx=$_REQUEST['mensaje'];
            ?>
            <h1>Determinar que sucede</h1>
        <?php endif; ?>

The two CSS styles are:

.itemName{  
    color: #727578;
    font-size :16px;
    font-weight: bold;
    float: left;
    padding-left:25px;
    margin-right: 25px;
}

.description{   
    color: #4ea6bc;
    font-size :18px;
    font-weight: bold;
    float : left;
    padding-left: 15px;
}

When the code is executed by the browser, the PHP code inside the javascript lines works fine:

I'm doing my best but nothing works. Sorry for the long post and thanks for any help!

EDIT

The CSS is imported in the head section

<link rel="stylesheet" type="text/css" href="assets/css/custom.css"/>

and sorry for the duplicated IDs, some ctrl-c ctrl-v issues.

Answer 1

I have no idea what you're doing. The fact that I don't speak Spanish doesn't help either, but I'll try my best.

• You left out the most important information: How do you import the CSS?

• Regardless ot that, the first thing to note is this: Do not use the same id twice.
  <span class="itemName" id="quantity_first_product"> should be <span class="itemName" id="somedifferentid"> .

• Next thing is, when I tried to run this, the CSS worked, but I got complete gibberish. It looked like this:
  

• So I added a few rules to make it look better:

   li.row { clear: both; list-style-type: none; } 

  And that margin on the description doesn't look good at all, so I removed that too:

   .description { [...] margin:0px; } 

  Now it looked like this:

  

• So the CSS cleary works on my end. Here's a working example:

  Source of the get-data:

   <form method="get" action = "newEmptyPHP.php"> <input name = "transactionId" type="hidden" value="some-weird-id" > <input name = "transactionState" value="4"> <textarea name = "mensaje" rows="1" cols="50">Not everyone speaks spanish</textarea> <input type = "submit" value="Submit" > </form> 

  Your php file :

   <?php $transactionId = $_REQUEST['transactionId']; if ($_REQUEST['transactionState'] == 4): $estadoTx = "Transacción aprobada"; ?> <style> li.row { clear: both; list-style-type: none; } .itemName{ color: #727578; font-size :16px; font-weight: bold; float: left; padding-left:25px; margin-right: 25px; } .description{ color: #4ea6bc; font-size :18px; font-weight: bold; float : left; padding-left: 15px; margin: 0px; } </style> <div class="container-fluid"> <ul> <li class="row"> <span class="itemName" id="quantity_first_product">Estado de la transaccion: </span> <p class="description"><span class="description" id="state">This description is in English, because I don't speak spanish.</span></p> </li> <li class="row"> <span class="itemName">ID de la transaccion: </span> <p class="description"><span class="description" id="transactionID" >This description is in English, because I don't speak spanish.</span></p> </li> </ul> </div> <script type="text/javascript"> var transaction_state; var transactionState_span = document.getElementById("state"); transaction_state = <?php echo json_encode($estadoTx); ?>; transactionState_span.innerHTML = transaction_state.toString(); var transaction_id; var transactionID_span = document.getElementById("transactionID"); transaction_id = <?php echo json_encode($transactionId); ?>; transactionID_span.innerHTML = transaction_id.toString(); </script> <?php else: $estadoTx = $_REQUEST['mensaje']; ?> <h1>Determinar que sucede</h1> Something's missing here, compadre. <?php endif; ?>