Sorting results in SQL seems to have items hidden underneath results

[scalp8]

The data is being pulled nicely from the database, but when I put in an ORDER BY some of the hyperlinks from other results seem to be clickable by scrolling over the page in areas where other results are. Is this a looping issue? Again, it only happens when I sort them with an ORDER BY. Why would that be? Here's what I have:

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT Name, date_FORMAT(Start_date, '%a, %b %e, %Y') as Start_date, Start_time, County, State, Website, Description, Venue_name, Category, User_hosted, nUser_Id FROM tbl_events
ORDER BY EventID DESC";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();

$i=0;
while ($i < $num) {

$Name=mysql_result($result,$i,"Name");
$Start_date=mysql_result($result,$i,"Start_date");
$Start_time=mysql_result($result,$i,"Start_time");
$County=mysql_result($result,$i,"County");
$State=mysql_result($result,$i,"State");
$Website=mysql_result($result,$i,"Website");
$Description=mysql_result($result,$i,"Description");
$Venue_name=mysql_result($result,$i,"Venue_name");
$Category=mysql_result($result,$i,"Category");
$User_hosted=mysql_result($result,$i,"User_hosted");
$nUser_Id=mysql_result ($result,$i,"nUser_Id");

if ($User_hosted=="Y")
{
echo '<div style="font-family:Arial; font-size:18px; color:black; padding-bottom:10px;">';
echo "$Name";
echo '<div style="font-family:Arial; font-size:14px; color:black; padding-left:10px; padding-bottom:10px; margin-bottom:25px; border-bottom:1px solid #000000; line-height:1.55em;">';
echo "$Start_date &nbsp"; echo " $Start_time<br>";
echo "@ $Venue_name "; echo "in $County, "; echo "$State<br>";
echo "<a href='http://$Website' target='_blank'>$Website</a><br>";
echo "$Description<br>";
echo "User hosted?: $User_hosted &nbsp; &nbsp"; echo "By <a href='http://example.com/profile.php?id=$nUser_Id&pageFromWhere=pageFromWhere' target='_blank'>this user";
echo '</div>';
}

if ($User_hosted=="N")
{
echo '<div style="font-family:Arial; font-size:18px; color:black; padding-bottom:10px;">';
echo "$Name";
echo '<div style="font-family:Arial; font-size:14px; color:black; padding-left:10px; padding-bottom:10px; margin-bottom:25px; border-bottom:1px solid #000000; line-height:1.55em;">';
echo "$Start_date &nbsp"; echo " $Start_time<br>";
echo "@ $Venue_name "; echo "in $County, "; echo "$State<br>";
echo "<a href='http://$Website' target='_blank'>$Website</a><br>";
echo "$Description<br>";
echo '</div>';
}
$i++;
}

?>

[edited by: coopster at 3:21 pm (utc) on Feb. 4, 2009]
[edit reason] please use example.com in code [/edit]

[coopster]

No, it is not an ORDER BY nor a looping issue -- it is a formatting issue. You need to prepare your data for output properly. Any data being sent to the browser that may have html entities should be properly formatted as such before printing to the browser. You can see this by using the "View Source" feature of your browser. Also, run your output through a validator and you will see your errors quite quickly.
Resources:
PHP htmlentities [php.net] manual page
Markup Validation Service [validator.w3.org]

[rocknbil]

Note that you are opening two divs and only closing one.

Also outputting semantic html might be a better solution. It will also make it easier to see what's going on by clearing out the markup in your output:

<style type="text/css">
.container {
font-family:Arial;
color:black;
padding-bottom:10px;
}
.container h4 { font-size:18px; padding:0; margin: 0; }
.container ul {
font-size:14px;
padding-left:10px;
padding-bottom:10px;
margin-bottom:25px;
border-bottom:1px solid #000000;
line-height:1.55em;
}
.container ul li { list-style: none; }
</style>

....

echo "<div class=\"container\">\n";
echo "<h4>$Name</h4>\n";
echo "<ul>\n";
echo "<li>$Start_date &nbsp; $Start_time</li>\n";
echo "<li>@ $Venue_name in $County, $State</li>\n";
echo "<li><a href=\"http://$Website\" target=\"_blank\">$Website</a></li>\n";
echo "<li>$Description</li>\n";
echo "</ul>\n</div>\n\n";

....

[scalp8]

Thank you for editing the post coopster. I just noticed that I had left that in there.
I've done some reading on htmlentities and tried it out a couple of places in the code. I'm not sure where it should go. The $Website link is not showing up out of place, only the $nUser_Id on is being a problem. I can't get the validator to even check the page.
A couple options I tried:

$nUser_Id=htmlentities(mysql_result ($result,$i,"nUser_Id"));

htmlentities("By <a href='http://example.com/profile.php?id=$nUser_Id&pageFromWhere=pageFromWhere' target='_blank'>this user")

I'm very new to this so if what I've tried is completely ridiculous would you mind explaining to me why?

[coopster]

First, read the advice post by rocknbil there in regards to the formatting that I first brought up. You will have a lot less problems by using clean and correct markup. If the validator didn't work for you because it won't follow the url, then use the "View Source" option in your browser and copy/paste the code in the last tab of the validator service, "Validate by Direct Input". It should certainly work every time.

As far as htmlentities goes, there isn't much more that I can tell you than what is on the manual page that I offered. You don't use it on exiting html (unless you want to show the html in your browser page as opposed to allowing the browser to render the html). htmlentities should be used on text or data that you are outputting to the browser so that it can be embedded in your existing html. If I tried to write out something from my database that contained html entities it would screw up the browser. For example,

$dataFromDB = $row['myText']; // myText contains: Is p2<p1? 
// try to use that in some html ... 
print "<p>$dataFromDB</p> // renders as: <p>Is p2<p1?<p> 
// and your browser will not display it properly!

The browser is going to see that less than sign in the comparison sentence and think that it is part of the html that it is to render. It is going to throw your display way off the mark. You need to convert those special characters to their "HTML entities" using that function. It makes thinks like the less than sign

<

into it's html entity equivalent

<

so that the browser will render the output correctly.

[scalp8]

Thank you for the tips guys. I have closed up the first div and I also realized that the second hyperlink wasn't closed which seems to have fixed the problem. I messed around with and read about the htmlentities, but could not get it to work for me. I will try to figure it out because it seems useful.