DIV overlapping image instead of going underneath in Chrome, Looks Correct in Other Browsers

Question

I constructed a code that reads video data from a database and displays many videos and their related information on the page in rows of 5.

It's supposed to be displayed as the video thumbnail image with the video title and view count below the thumbnail.

I use Firefox and it looks as its supposed to when I view it. However, when viewed using Chrome, the video title & view count overlap the video thumbnail image.

Here is an example of how it looks in Firefox and in Chrome: https://i.stack.imgur.com/4mXCj.jpg (I don't have enough reputation points to upload 2 images so I merged them)

The code is in PHP and reads from a MySQL database:

<DIV id="wrapper">
<div style="background-color: #FFF;height:auto;">
<div class="videos" style="margin-top:2px;text-align:left;">
<div style="margin-left:50px;margin-right:5px;margin-top:-5px;">

<br /><div style="width:855px;"><ul>

$result=mysql_query("SELECT * FROM videos order by ID DESC LIMIT $from, $max_results ");

while ($i = mysql_fetch_array($result))
{
    $id = $i["ID"];
    $title = $i["title"];
    $youtube = $i["youtube"];
    $date = $i["date"];
    $category = $i["category"];
    $description = $i["description"];

    $video_ID = $youtube;
    $JSON = file_get_contents("https://gdata.youtube.com/feeds/api/videos/{$video_ID}?v=2&alt=json");
    $JSON_Data = json_decode($JSON);
    $views = $JSON_Data->{'entry'}->{'yt$statistics'}->{'viewCount'};

if ($currentdate != $date) {
    $currentdate = $date;
    $date = date("F d, Y",strtotime($date));
    echo "</ul><h2><span style='text-transform:uppercase;'>$date</span></h2><br /><ul>";
}

echo "<li style='width:170px;'>
<a href='video.php?v=$youtube' style='margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;'>
<img border='0' src='http://img.youtube.com/vi/$youtube/hqdefault.jpg' height='100' width='160' /></a>&nbsp;<br />

<div style='text-align:left;vertical-align: bottom;width:160px;height:50px;'>
<strong>$title</strong>
<br />Views: $views</div>
<br /><br />
</li>";

}

</div></ul></div>
</div>
</DIV>

I haven't coded for the Chrome browser specifically before. So I don't know how I would modify my code to fix this so it looks like in the Firefox example above.

If anyone could lend any help, it would be greatly appreciated.

Thank you

If you want to view the site in action: http://justinterviews.org

Just a fyi, you shouldn't be using mysql_* Check this for more info. http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php — , Mar 06 '13 at 05:00

Manahara Mohotti · Answer 1 · 2013-03-06T05:16:15.423

0

In your styles section(CCS) there is a property called "display:inline-block" Remove this line. Hope you can solve the problem.

a:link,a:visited {
   display:inline-block; (Remove this line)
}

edited Mar 06 '13 at 05:16

answered Mar 06 '13 at 05:03

Manahara Mohotti

46
3

score 0 · Accepted Answer · answered Mar 06 '13 at 05:06

A lot of inline styles are bad! Please use CSS files.

For your issue, replace:

<a href="video.php?v=CRDZ4uCNs3I" style="margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;">
                    <img border="0" src="http://img.youtube.com/vi/CRDZ4uCNs3I/hqdefault.jpg" height="100" width="160"></a>

With:

<a href="video.php?v=CRDZ4uCNs3I" style="display: inline; margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;">
                    <img border="0" src="http://img.youtube.com/vi/CRDZ4uCNs3I/hqdefault.jpg" height="100" width="160"></a>

For all the <a> tags. The display: inline-block; needs to be changed to display: inline;. That fixes it.

Also, I know better than to use so many inline styles, don't worry! It's just temporary until I finish this part I'm working on haha. Then I'll clean it up :) — noland, Mar 06 '13 at 05:11
Cleaning up is worse than doing it in scratch. By experience. :) — Praveen Kumar Purushothaman, Mar 06 '13 at 05:14

DIV overlapping image instead of going underneath in Chrome, Looks Correct in Other Browsers

2 Answers2