PHP code breaks CSS (I'm guessing?)

CMS & WordPress
1

Hi,

On a website we’re designing for a client, we have a piece of PHP that retrieves subcategories of photos, displayed using a click-able div. These are the two light blue boxes under the larger grey description box.

PHP code:


echo '<a href="prefab_in" class="cat_block">';
        echo '<div class="cat_icon"><img src="/gui/cat_prefabin.jpg" border="0"></div>';
        echo '<div class="cat_info">';
        echo '<div class="cat_title">'. _e('[:nl]geprefabriceerde baden[:fr]piscines pr&eacute;fabriqu&eacute;es') .'</div>';
        echo '<div class="cat_desc">'. _e('[:nl]naadloze, voorgevormde constructies[:fr]naadloze, voorgevormde constructies') .'</div>';
        echo '</div>';
        echo '</a>';

This is the CSS used for the markup:


div#subcats{
overflow: hidden;
padding-bottom: 20px;
clear: both;
margin-left: -40px;
position:relative;/* ie fix */
zoom:1.0;/* ie fix*/
}

    /* category blocks */
    a.cat_block{
    width: 410px; /* 430px in total */
    height: 92px; /* 112px in total */
     padding: 10px;
    background-image: url(/gui/background_homeoff.jpg);
    background-repeat: repeat-x;
    background-position: top;
    background-color: #e6ebee;
    color: #383c3d;
    display: block;
    text-decoration: none;
    float: left;
    margin-left: 40px;
    margin-bottom: 15px;
    overflow: hidden;
    text-align: left;
    }
    
        .cat_block .cat_icon{ float: left; width: 136px; height: 91px; margin-right: 10px; display:block; }
        .cat_block .cat_icon img{ border: 3px solid #aab8bd; }
        
        .cat_block .cat_info{ float: left; width: 260px; padding-top: 10px; }
        .cat_block .cat_info .cat_title{ color: #00718c; font-weight: bold;}
        .cat_block .cat_info .cat_desc{ text-align: left; color: #383c3d;}
    
    a.cat_block:hover{
    background-image: url(/gui/background_homeon.jpg);
    background-repeat: repeat-x;
    background-position: top;
    background-color: #000000;
    color: #ffffff;
    }
        
        .cat_block:hover .cat_info .cat_title{ color: #ffffff; font-weight: bold; }

For some reason, the actual HTML code shows the PHP variables “outside” their respective divs:


<a href="architectural_in" class="cat_block">

<div class="cat_icon"><img src="/gui/cat_architecturalin.jpg" border="0"></div>
<div class="cat_info">bouwkundige baden
<div class="cat_title"></div>bouwkundige constructies uit beton
<div class="cat_desc"></div>
</div></a>

The “cat_info” div should hold both the title and description (like in the PHP code), but the text is showed outside of the tags within. The “bouwkundige baden” should be inside the “cat_title” div and be rendered as intended by the CSS.

Any idea what could cause this behavior? Same thing seems to happen in a slightly different way with the categories on the homepage of the site.

Thanks in advance for your help.

Stef

2

You’re using Wordpress, right?

The _e() function causes what you put in there to echo immediately upon being called, so it gets echoed before the rest of the line.

Change your _e() to () (two underscores) and you should be good (() is the same as _e(), except it returns the value, which is what you want).

3

Thanks samanime! That did the trick. Good to know for the future btw. :wink:

4

damned WordPress. __() what an intuitive function name. Brilliant.

5

I actually prefer it to the alternative of something like translate() or something longer. =p

Those three (__(), _e(), and _x()) are the only ones… I can live with that. =p