PHP behaves weird, mixing up HTML markup.

Question

Thanks for looking on this problem.

I have a page that is totally valid page, and there is a PHP loop that brings in a <li> for each entry of the table.

When i check this page locally it looks 100% OK, but when veiwing the page online the left side bar (which creates this markup is broken randomly mixing <div>'s and <li>'s and i have no clue what the problem is.

This problem is on FF mac and PC (safari looks good)

See page (problem is on the left side)

php code

<?php do { ?>
    <li class="clear-block" id="<?php echo $row_Recordset1['penSKU']; ?>">
      <a title="Click to view the <?php echo $row_Recordset1['penName']; ?> collection" rel="<?php echo $row_Recordset1['penSKU']; ?>">
         <img src="prodImages/small/<?php echo $row_Recordset1['penSKU']; ?>.png" alt="" />
           <div class="prodInfoCntnr">     
                <div class="basicInfo">
                 <span class="prodName"><?php echo $row_Recordset1['penName']; ?></span> 
                 <span class="prodSku"><?php echo $row_Recordset1['penSKU']; ?></span>
                 </div>
                 <div class="secondaryInfo">
                 <span>As low as .<?php echo $row_Recordset1['price25000']; ?>¢ <!--<em>(R)</em>--></span>
                     <div class="colorPlacholder"  rel="<?php echo $row_Recordset1['penColors']; ?>"></div>
                </div>
           </div>
           <div class="additPenInfo">
               <div class="imprintInfo"><span>Imprint area: </span><?php echo $row_Recordset1['imprintArea']; ?></div>
            <div class="colorInfo"><span>Available in: </span><?php echo $row_Recordset1['penColors']; ?></div>
            <table border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <th>Amount</th>
                    <th>500</th>
                    <th>1,000</th>
                    <th>2,500</th>
                    <th>5,000</th>
                    <th>10,000</th>
                    <th>20,000</th>
                  </tr>
                  <tr>
                   <td>Price <span>(R)</span></td>
                    <td><?php echo $row_Recordset1['price500'];?>¢</td>
                    <td><?php echo $row_Recordset1['price1000'];?>¢</td>
                    <td><?php echo $row_Recordset1['price2500'];?>¢</td>
                    <td><?php echo $row_Recordset1['price5000'];?>¢</td>
                    <td>Please Contact</td>
                    <td>Please Contact</td>
                  </tr>
</table>
           </div>
    </a>
   </li>
        <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

Answer 1

You cannot put a <div> inside of <a>.

Divs are block level elements. Anchors are not. Basically, it's like putting <span> outside of <div>. Doesn't make any sense.

Solution: Move the anchors to inside the divs.

(In the future, if different browsers are displaying it differently, it's probably not the PHP but the HTML.)