Question

I created a php file that parses a .txt file to display real estate ads.

I used a foreach loop for the arrays and everything works well except in IE7. The text size increases after each array in IE7. This is all within in a joomla article and the appropriate php file is included using the Sourcerer plugin.

I changed the font-size from % to em in the appropriate css files, but that did not work. I tried to use zoom:1 in the divs but I already have a position:absolute within the containg div and that did not work either.

The foreach loop:

foreach($results as $book){
echo '<div id="annonces">';
echo '<div id = "annoncetext">';
echo '<p class="annonces_title"> ' . $book[2]. '</p>';
echo '<p class="annonces_ref">' . $book[3]. ' m<sup>2</sup> - ' . $book[4] . ' pièces - ' . $book[5] . ' chambres<br>';
echo '<p class="annonces_prix">Prix : '  . $book[6]. ' €<br></p>';
echo '<p class="annonces_description">' .  $book[8]. '<br><br>';
'</div></div>';

And some of the relevant css:

p.annonces_title{ 
    font-size: 1.75em;
    font-weight:normal;
    line-height:28px;
    padding: 5px 10px 1px 0px;
    margin: 0px 4px 13px 0;
    letter-spacing:0px;
    text-transform: uppercase;
    color:#fff;
}
p.annonces_prix{ 
    font-size:1.3em;
    line-height:18px;
    padding:8px 0 4px 0;
    margin-bottom:8px;
    color:#fff;
    font-weight:normal;
    text-transform:none;
}

#annonces {
    margin-left:0;
    margin-top:30px;
    width:1080px;
    font-size-adjust:none;
    min-height:500px;
    position:relative;
    background-image:url(filet-annonces.jpg);
    background-position:bottom;
    background-repeat:no-repeat;
}

#annoncetext {
    position:absolute;
    top:0;
    width:340px;    
}

To finish, not only do the text-size increase with each new ad, but the footer, which is not in the loop is also enlarged. Here is a link to the page.
http://www.lagrandiere-immobilier.fr/espace-location/nos-offres-de-location
The phenomena can be observed in Adobe BrowserLab.

Answer 1

You have missing closing </p> tag in the end of the lines

echo '<p class="annonces_ref">' . $book[3]. ' m<sup>2</sup> - ' . $book[4] . ' pièces - ' . $book[5] . ' chambres<br>';

and also here:

echo '<p class="annonces_description">' .  $book[8]. '<br><br>';

So your HTML might be rendered incorrectly.

Additionaly you shouldn’t use ID when in loop, because ID attribute should be unique,
so I suggest changing it to class attribute, or make it unique by adding ID suffix.