HTML Styling inside PHP doesn't follow the CSS

Question

I have a bit of PHP script with an echo output in HTML that I want to style using a CSS file. I have placed the correct div and span classes that should, in theory, call from the CSS file and style correctly. Only they don't seem to be and I can't fathom why.

The text style looks ok but its the padding that's messed up. I have pasted the code below:

<?php
// How Many Topics you want to display?
$topicnumber = 5;
// Change this to your phpBB path
$urlPath = "/forum";

// Database Configuration (Where your phpBB config.php file is located)
include 'forum/config.php';

$table_topics = $table_prefix. "topics";
$table_forums = $table_prefix. "forums";
$table_posts = $table_prefix. "posts";
$table_users = $table_prefix. "users";
$link = mysql_connect("$dbhost", "$dbuser", "$dbpasswd") or die("Could not connect");
mysql_select_db("$dbname") or die("Could not select database");

$query = "SELECT t.topic_id, t.topic_title, t.topic_last_post_id, t.forum_id, p.post_id, p.poster_id, p.post_time, u.user_id, u.username
FROM $table_topics t, $table_forums f, $table_posts p, $table_users u
WHERE t.topic_id = p.topic_id AND
f.forum_id = t.forum_id AND
t.forum_id != 4 AND
t.topic_status <> 2 AND
p.post_id = t.topic_last_post_id AND
p.poster_id = u.user_id
ORDER BY p.post_id DESC LIMIT $topicnumber";
$result = mysql_query($query) or die("Query failed");                                   

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {

echo  "<article><figure><img src='voxis-template/HTML & CSS/img/gaming12.jpg' alt='' /></figure><div class='text'><h3><a href=\"$urlPath/viewtopic.php?f=$row[forum_id]&t=$row[topic_id]&p=$row[post_id]#p$row[post_id]\" TARGET=\"_blank\"></h3></div>" .
$row["topic_title"] .
"<span class='info'></a></td></font></b><td><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#C0C0C0\"> by: <a href=\"$urlPath/memberlist.php?mode=viewprofile&u=$row[user_id]\" TARGET=\"_blank\"></span>" .
$row["username"] .
"</td><td><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#C0C0C0\">" .
date('F j, Y, g:i a', $row["post_time"]) .
"</td></tr></font></article>";
}

mysql_free_result($result);
mysql_close($link);
?>

Below is the same code within its wrapping Divs

<div class='span4 article-box'>
                    <div class='box-title'>
                        <h2>Forum Posts </h2>
                        <div class='title-line'></div>
                    </div>
                    <article class='first-child'>
                        <figure>
                            <img src="voxis-template/HTML & CSS/img/gaming01.jpg" alt="" />
                        </figure>
                        <div class='text'>
                            <h3><a href="forum/viewtopic.php?f=17&t=8">Improve your landings with our ILS Training tips posted on the forum. Get your landings under 200fpm!</a></h3>
                            <span class='info'>Mon Jan 07, 2013 11:05 pm</span>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img src="voxis-template/HTML & CSS/img/gaming02.jpg" alt="" />
                        </figure>
                        <div class='text'>
                            <h3><a href="forum/viewtopic.php?f=2&t=92">ORBX Global Scenery is out! See the world in stunning photorealism. </a></h3>
                            <span class='info'>Sat Jul 27, 2013 3:38 am</span>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img src="voxis-template/HTML & CSS/img/gaming03.jpg" alt="" />
                        </figure>
                        <div class='text'>
                            <h3><a href="forum/viewtopic.php?f=7&t=74">Pilots take to the skies in an "around the world" flight.</a></h3>
                            <span class='info'>Tue Jun 18, 2013 10:38 am</span>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img src="voxis-template/HTML & CSS/img/gaming07.jpg" alt="" />
                        </figure>
                        <div class='text'>
                            <h3><a href="forum/viewtopic.php?f=10&t=75">Can you add a UK/Europe route please...</a></h3>
                            <span class='info'>Tue Jun 18, 2013 10:40 am</span>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img src="voxis-template/HTML & CSS/img/gaming08.jpg" alt="" />
                        </figure>
                        <div class='text'>
                            <h3><a href="forum/viewtopic.php?f=11&t=53">Please read the rules of the airline. They are designed to keep everything happy and harmonious...</a></h3>
                            <span class='info'>Wed Mar 06, 2013 9:46 am</span>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img src="voxis-template/HTML & CSS/img/gaming09.jpg" alt="" />
                        </figure>
                        <div class='text'>
                            <h3><a href="forum/viewtopic.php?f=2&t=94">New USA Hub announced at John F Kennedy International.</a></h3>
                            <span class='info'> Sat Aug 17, 2013 3:54 pm</span>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img src="voxis-template/HTML & CSS/img/gaming10.jpg" alt="" />
                        </figure>
                        <div class='text'>
                            <h3><a href="voxis-template/HTML & CSS/blog.html">Thoughts on changing flight management system. VAFS, FS Airlines or PHPVMS...</a></h3>
                            <span class='info'>Wed Jul 03, 2013 11:06 am</span>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img src="voxis-template/HTML & CSS/img/gaming11.jpg" alt="" />
                        </figure>
                        <div class='text'>
                            <h3><a href="forum/viewtopic.php?f=19&t=27">Blue Spirit's FS Open Session proves popular. We're up to 6th place in the rankings...</a></h3>
                            <span class='info'>Thu Jan 17, 2013 10:53 pm</span>
                        </div>
                    </article>
                    <article>
                        <figure>
                            <img src="voxis-template/HTML & CSS/img/gaming12.jpg" alt="" />
                        </figure>
                        <div class='text'>
                            <h3><a href="forum/viewtopic.php?f=23&t=67">New CRJ700 added to the fleet.</a></h3>
                            <span class='info'>Wed Jun 05, 2013 10:57 am</span>
                        </div>
                    </article>
                        <?php
// How Many Topics you want to display?
$topicnumber = 5;
// Change this to your phpBB path
$urlPath = "/forum";

// Database Configuration (Where your phpBB config.php file is located)
include 'forum/config.php';

$table_topics = $table_prefix. "topics";
$table_forums = $table_prefix. "forums";
$table_posts = $table_prefix. "posts";
$table_users = $table_prefix. "users";
$link = mysql_connect("$dbhost", "$dbuser", "$dbpasswd") or die("Could not connect");
mysql_select_db("$dbname") or die("Could not select database");

$query = "SELECT t.topic_id, t.topic_title, t.topic_last_post_id, t.forum_id, p.post_id, p.poster_id, p.post_time, u.user_id, u.username
FROM $table_topics t, $table_forums f, $table_posts p, $table_users u
WHERE t.topic_id = p.topic_id AND
f.forum_id = t.forum_id AND
t.forum_id != 4 AND
t.topic_status <> 2 AND
p.post_id = t.topic_last_post_id AND
p.poster_id = u.user_id
ORDER BY p.post_id DESC LIMIT $topicnumber";
$result = mysql_query($query) or die("Query failed");                                   

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {

echo  "<article><figure><img src='voxis-template/HTML & CSS/img/gaming12.jpg' alt='' /></figure><div class='text'><h3><a href=\"$urlPath/viewtopic.php?f=$row[forum_id]&t=$row[topic_id]&p=$row[post_id]#p$row[post_id]\" TARGET=\"_blank\"></h3></div>" .
$row["topic_title"] .
"<span class='info'></a></td></font></b><td><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#C0C0C0\"> by: <a href=\"$urlPath/memberlist.php?mode=viewprofile&u=$row[user_id]\" TARGET=\"_blank\"></span>" .
$row["username"] .
"</td><td><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#C0C0C0\">" .
date('F j, Y, g:i a', $row["post_time"]) .
"</td></tr></font></article>";
}

mysql_free_result($result);
mysql_close($link);
?>

                </div>

You can see the live example here. If you look down the left side of the page you'll see a number of static posts and then the php called ones at the bottom of the list. If you look at the images you'll see what I mean about the padding or margin.

I can't work out what's wrong and I'm hoping someone else can. It seems that the CSS is not being pulled through or referenced properly?

Thanks

Andy

Look at your links, in the static they are inside the h3, in the php they are after the h3 (with also an empty on inside the h3). use the element inspector in chrome or firebug, it will be easier to see the issues with "prettified" html — Matt.C
– Matt.C, Commented Nov 15, 2013 at 13:54
If you bothered to look at your rendered source, you'd see where you're going wrong. Why are you adding inline css, when you need to adhere to your classes. — Ben Fortune
– Ben Fortune, Commented Nov 15, 2013 at 13:55
also there are table tags ('<tr>, <td>') in your generated content which are not present in your static content — cypherabe
– cypherabe, Commented Nov 15, 2013 at 13:57
just for reference: it does NOT matter if you use inline style attributes or classes for styling in PHP generated content! The browser does not know how the html content that is send to the browser was generated, if it was a static file, a PHP script, an ASP script, perl, whatever... — cypherabe
– cypherabe, Commented Nov 15, 2013 at 14:02
Look at your rendered HTML. Compare it to the existing HTML that is not output by PHP. Fix the PHP script so the structure is identical to the desired output (your output right now is a mess and does not reflect your code structure). The CSS will work fine, the problem here is your markup is bad so the selectors aren't targeting the expected elements. — Ennui
– Ennui, Commented Nov 15, 2013 at 14:26

Jonathan Nielsen · Accepted Answer · 2013-11-15 14:22:50Z

0

You may want to move your closing </a> tag to before the closing </h3>

Then you can remove the random <td> and </td> throughout the code.

This may help.

PS: I also see a closing </b> tag but no <b> tag.

answered Nov 15, 2013 at 14:22

Jonathan Nielsen

568 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML Styling inside PHP doesn't follow the CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related