CSS does not work when rendered through PHP

Question

I found this neat tip on how to equally space divs within a container: Fluid width with equally spaced DIVs

I tried it out using static HTML and it works just fine:

<div class="category_area">
<div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div>
<div class="news_box shadow"><div class="inside">B</div></div>
<div class="news_box shadow"><div class="inside">C</div></div>
<div class="news_box shadow"><div class="inside">D</div></div>
<span class="stretch"></span></div>

And then I did this programatically with PHP:

<?php
echo "<div class='category_area'>";
for ($i=0;$i<4;$i++) {
    echo "<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div>";
}
echo "<span class='stretch'></span></div>";

However, the PHP version does not work although when I view the source through the browser the resulting HTML is identical. I am thinking this is because of the way PHP is rendered.

Here's my CSS:

.category_area {
    text-align:justify;
    -ms-text-justify:distribute-all-lines;
    text-justify:distribute-all-lines;
}

.category_area .news_box {
    width:200px;
    height:250px;
    vertical-align:top;
    display:inline-block;
    *display:inline;
    zoom:1;
    background:#fff;
    padding:10px;
}

.category_area .news_box .inside {
    display:block;
}

.stretch {
    width:100%;
    display:inline-block;
    font-size:0;
    line-height:0;
}

.shadow {
    -moz-box-shadow: 3px 3px 4px #999;
   -webkit-box-shadow: 3px 3px 4px #999;
    box-shadow: 3px 3px 4px #999;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
}

Here's how it looks when the source is viewed through the browser (static one):

<div class="category_area">
<div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div>
<div class="news_box shadow"><div class="inside">B</div></div>
<div class="news_box shadow"><div class="inside">C</div></div>
<div class="news_box shadow"><div class="inside">D</div></div>
<span class="stretch"></span></div>

PHP version:

<div class='category_area'><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><span class="stretch"></span></div>

Any tips on how to make this work?

The only difference at first glance is the double and single quotes, so I might try changing the PHP version to output double quotes. Other than that, my only advice is to make sure it's valid HTML and CSS. With invalid HTML, you can't really expect a browser to render it correctly. (Invalid CSS is unfortunately unavoidable if you use browser-specific options, but you should make sure the rest of it is valid.) — Corbin, Aug 12 '12 at 03:11
Make sure you escape the quotes if you're using them in PHP as well! <" \"> — John, Aug 12 '12 at 03:13

score 4 · Accepted Answer · answered Aug 12 '12 at 03:31

4

You are missing whitespace (line breaks in your html sample) - which is one of the reasons I personally try to avoid any such inline-block workarounds.

Adding a line break or a space would fix it for you:

for ($i=0;$i<4;$i++) {
    echo "\r\n<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div>";
}

Or, for somewhat more readable (imo) markup:

for ($i=0;$i<4;$i++) { ?>
  <div class="news_box shadow">
    <div class="inside">
      <h2><a href="#">Test</a></h2>
    </div>
  </div>
<?php }

answered Aug 12 '12 at 03:31

Oleg

24,465
8
61
91

This works! Thanks. Why would using inline-block require a whitespace? (Sorry new to CSS) – Dustine Rene Bernasor Aug 12 '12 at 03:38
@DustineReneBernasor: let me rephrase that; your particular fluid width workaround relies on `text-align:justify` which "stretches out" whitespace to render as desired. `inline-block` boxes, unlike `block` boxes, do not discard whitespace which make the solution workable. This is better explained in [specs](http://www.w3.org/TR/CSS2/visuren.html) or on [MDN](https://developer.mozilla.org/en-US/docs/CSS/display) – Oleg Aug 12 '12 at 03:52

score 0 · Answer 2 · answered Aug 12 '12 at 03:28

I fooled around with it until I got it to look like the defaulted HTML that you posted, and here's what I got:

<div class='category_area'>
<?
    for ($i=0;$i<4;$i++) { 
?>
<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div>
<?  } ?>
<span class='stretch'></span></div>

This seems a bit of hacky , so there might be a better way to do it.

score 0 · Answer 3 · answered Aug 12 '12 at 04:10

use this one

<?php
echo '<div class="category_area">';
for ($i=0;$i<4;$i++) {
    echo '<div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div> ';
}
echo '<span class="stretch"></span></div>';
?>

the problem is in echo "<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div>"; line. print extra space solve your problem. like

echo "<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div> ";

CSS does not work when rendered through PHP

3 Answers3