Table not displaying correctly as .php file, but works as .html?!

[NuGG]

Ok so I have the following code for a table with CSS rules designed to "collapse the table horizontally" on smaller screens...

<table>
  <thead class="thead">
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
        <th>e</th>
        <th>f</th>
        <th>g</th>
    </tr>
  </thead>
  <tbody>
<tr>
        <td data-label="a">1</td>
        <td data-label="b">2</td>
        <td data-label="c">3</td>
        <td data-label="d">4</td>
        <td data-label="e">5</td>
        <td data-label="f">6</td>
        <td data-label="g">
            <div class="class1">
              <button type="button" class="btn">
                <span class="btn_span">btn</span><span class="caret"></span>
              </button>
             <ul class="class2">
                <li></li>
                <li></li>
             </ul>
          </div>
        </td>
</tr> 
  </tbody>
</table>

It works perfectly when saved as a .html file, however when the exact same code is saved as a .php file (just change file extension,) it fails to collapse correctly on smaller screens.

So my question is... What would make this identical code work perfectly as a html file but not as a php file?

Something to do with encoding I am guessing, but I just cant figure it out and I have wasted so much time on it. If I check the source code of the php version it is exactly the same as the html version.

Anyone come across simalar issues where html works as a html file but not as a php file?

[jkon]

Have you checked with a client side tool like Firebug or Chrome Developer tools that the same CSS rules apply in both cases ?

[NuGG]

Have you checked with a client side tool like Firebug or Chrome Developer tools that the same CSS rules apply in both cases ?

I havent actually checked, but it does appear that the css rules dont come into effect for the php version, yet if I change the file extention to html it works. What could cause css rules to be handled differently for a .php extention?

[Taywin]

Have you try to "echo" the whole page out instead of leave it as is? Just curious.

Clear the browser cache - I'm assuming you have js in there somewhere too?

[NuGG]

Clear the browser cache - I'm assuming you have js in there somewhere too?

Its not a caching issue. There is js (jquery and bootstrap) on the page but I dont think it should be effecting the table. The CSS rules for the table are being applied AFTER all the other rules.

It happens in all browsers and devices I have tested - so its not a bug in a particular browser.

...and most importantly the exact same code works as a html file.

Nobody has mentioned encoding? - could this be an issue with encoding?- its currently set to utf-8 in the headers.

[developer707]

If you post the original file would be much helfull for everyone to give you an advice!
Maybe is somehow related with php configuration issues...

[NuGG]

The table as is...

<div class="product-details">
    <table>
      <thead class="thead">
        <tr>
          <th>product_id</th>
          <th>model</th>
          <th>size</th>
          <th>kg</th>
          <th>price</th>
          <th>availablity</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="product_id">1217-12-01</td>
          <td data-label="model">Banjo polyprop camlock - part C</td>
          <td data-label="size">1"</td>
          <td data-label="kg">0.06kg</td>
          <td data-label="price">£1.00</td>
          <td data-label="availablity">2-3 day</td>
          <td data-label="">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                ADD TO... <span class="caret"></span>
              </button>
             <ul class="dropdown-menu" role="menu">
                <li><a class="play-icon popup-with-zoom-anim" href="#small-dialog2">SHOPPING CART<img src="images/cart.png" alt="" /></a></li>
                <li><a class="play-icon popup-with-zoom-anim" href="#small-dialog2">WISHLIST<img src="images/wish.png" alt="" /></a></li>
             </ul>
           </div>
          </td>
        </tr>
        <tr>
          <td data-label="product_id">1217-12-02</td>
          <td data-label="model">Banjo polyprop camlock - part C</td>
          <td data-label="size">2"</td>
          <td data-label="kg">0.06kg</td>
          <td data-label="price">£2.00</td>
          <td data-label="availablity">2-3 day</td>
          <td data-label="">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                ADD TO... <span class="caret"></span>
              </button>
             <ul class="dropdown-menu" role="menu">
                <li><a class="play-icon popup-with-zoom-anim" href="#small-dialog2">SHOPPING CART<img src="images/cart_true.png" alt="" /></a></li>
                <li><a class="play-icon popup-with-zoom-anim" href="#small-dialog2">WISHLIST<img src="images/wish.png" alt="" /></a></li>
             </ul>
           </div>
          </td>
        </tr>
        <tr>
          <td data-label="product_id">1217-12-03</td>
          <td data-label="model">Banjo polyprop camlock - part C</td>
          <td data-label="size">3"</td>
          <td data-label="kg">0.06kg</td>
          <td data-label="price">£3.00</td>
          <td data-label="availablity">2-3 day</td>
          <td data-label="">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                ADD TO... <span class="caret"></span>
              </button>
             <ul class="dropdown-menu" role="menu">
                <li><a class="play-icon popup-with-zoom-anim" href="#small-dialog2">SHOPPING CART<img src="images/cart.png" alt="" /></a></li>
                <li><a class="play-icon popup-with-zoom-anim" href="#small-dialog2">WISHLIST<img src="images/wish_true.png" alt="" /></a></li>
             </ul>
           </div>
          </td>
        </tr>
        <tr>
          <td data-label="product_id">1217-12-04</td>
          <td data-label="model">Banjo polyprop camlock - part C</td>
          <td data-label="size">4"</td>
          <td data-label="kg">0.06kg</td>
          <td data-label="price">£3.00</td>
          <td data-label="availablity">2-3 day</td>
          <td data-label="">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                ADD TO... <span class="caret"></span>
              </button>
             <ul class="dropdown-menu" role="menu">
                <li><a class="play-icon popup-with-zoom-anim" href="#small-dialog2">SHOPPING CART<img src="images/cart_true.png" alt="" /></a></li>
                <li><a class="play-icon popup-with-zoom-anim" href="#small-dialog2">WISHLIST<img src="images/wish_true.png" alt="" /></a></li>
             </ul>
           </div>
          </td>
        </tr>
      </tbody>
    </table>
    </div>

The CSS-

.product-details table {
    border: 1px solid #ccc;
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size:80%;
    table-layout:fixed;
  }
.product-details table thead {
    font-size:70%;
  }

.product-details table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }

.product-details table tbody tr:hover {
    background-color: #ffff99;
  }

.product-details table th, table td {
    /*padding: 5px;*/
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 0px;
    padding-right: 5px;
    text-align: center;
  }

.product-details table th {
    text-transform: uppercase;
    /*font-size: 14px;*/
    letter-spacing: 1px;
    background-color:#424A9E;
    color:#FFF;
  }
.basket-button {
    display:none;
}

  @media screen and (max-width: 600px) {

.product-details table {
      border: 0;
    }

.product-details table thead {
      display: none;
    }

.product-details table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

.product-details table td {
      display: block;
      text-align: right;
      /*font-size: 13px;*/
      border-bottom: 1px dotted #ccc;
    }

.product-details table td:last-child {
      border-bottom: 0;
    }

.product-details table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }

.dropdown-menu {
    left: -7em;
  }
.basket-button {
    display:block;
}
}

There is also jquery.min.js, bootstrap.min.js, and bootstrap.css (which is applied before the above table css)

[jkon]

Hello NuGG,
You still don't do the first thing that we do at any time. Check with a client side developer tool like Firebug or Chrome Developer tools what is happening with the CSS. You still don't provide the original files , only parts of them, e.g how do you load the CSS files ? . How do you edit and how do you save the .php file (that is exactly the same as you metioned with the .html file). Do you have any header , like Content-Type (its safe to use header('Content-Type: text/html; charset=utf-8'); if you are using UTF-8) ) . Is there any BOM issue ? . All those questions would have been answered if you took a moment to look at your browser's developer tool.

[NuGG]

I cant post the whole code that makes up the page, its made up of lots of includes and overall is equal to 1000's of lines of php and html.

The css files are loaded using <link rel="stylesheet" href="..." type="text/css" media="all" /> in the header.

Im editing in Dreamweaver CS4.

The content type is text/html utf-8.

What is a BOM issue?

Dev tool says I should combine my CSS and JS files, no other issues reported.

Html has been validated, - just missing some image sizes.

[developer707]

I have write something on this attach, hope it will help you.
This problem had happen to me every time that I use ftp transfers as filezilla, wincsp.
This softwares usually changes the encode of the files.

My suggestion is to use Notepad++.
Another issue might be you hosting fault, on mine this works very well.
On the screenshoots that I have attached inside the archive, please see carefully what encodes I have used.

Simply put, BOM is the old chestnut for buggering up your page by inserting invisible characters. However, not sure that this is the case if you're using DW4 for editing. You could try editing the PHP pages in Notepad++ and encode as UTF-8 without BOM and then save:

If that doesn't work, look at "view page source", copy it, place it into a new .html in the same directory as your main page and view that.

[NuGG]

OK I tried saving it via notepad++ (utf-8 without BOM) and it has made no difference.

If I copy and paste the source from the php output into a .html file it works. So yes I can confirm there is NO DIFFERENCE between the source of the php version and the source of the html version - yet they display entirely differently.

I cant understand it, the code is identical in both the php and html version.

I may just try saving it as a html file and then tell the server to parse it as php, see if that works, but really I shouldnt have to do that!

I have to say this has stumped me. I'm assuming this is a local site and not something you provide a link to?

[NuGG]

I am such a fool.

Found some <pre> tags before the <head> while I was scrutinising inspect element for the nth time, which when rendered in a browser causes the entire page to be placed inside additional <!DOCTYPE html> and <body> tags. (How i missed this before i dont know!)

Strange thing about this is when viewing the source, although the <pre> tags could be seen the additional <!DOCTYPE html> and <body> tags are not rendered - probably why I hadnt spotted it before.

Thanks for all your support on this guys. If in future anyone has simalar issues ensure there are no tags before the doctype!