Question

I have a couple images stored in a database that I am trying to display in a styled list. The idea is when I call the images from the database the php code will generate the list inside the styled <div> element… unfortunately this is not the case. The list is generating, but it is not following any of my styles and the images are not displaying.

The image is showing it’s border on the page with width and height, but there is the missing file icon in the center… When I go to the database, the file is clearly there, named and everything. Even when I type in the file_display.php?id=1 at the end of the URL the image appears…

The images are saved in the Database in a jpeg format, with the table excepting LONGBLOG data

Here is my code to get the images and display them in the list:

    <div class="template_container">
    <h2>Templates</h2>  
    <ul style="margin: 0 50px;">

        <?php   

            // Grab the data 
            $sql = "select * from templates";
            $result = mysql_query($sql) or die ("Could not access DB: " . mysql_error());
            while ($row = mysql_fetch_assoc($result))
            {
                echo "<li>";
                echo "<a class=\"caption" . "href=\"cart.php?id=<?=" . $row['id'] . "&action=add>";

                echo "<img src=\"http://URL-REMOVED.com/file_display.php?id=<?=" . $row['id'] . "\" alt=\"\" /><br />";
                echo "<span>";
                echo "<big>" . $row['name'] . "<br />";
                echo $row['description'];
                echo "</span>";
                echo "</li>";

            }

        ?>
    </ul>
</div>

and here is the css that is supposed to style the list:

.template_container {
    width: 100%;
    height: auto;
    border-top: 1px solid #e8e8e8;
    margin: 75px auto 25px auto;
    padding-top: 25px;
}

.template_container h2 {
    font-family: 'Podkova', serif;
    font-size: 58px;
    line-height: 66px;
    color: #2d9dc8; font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -2px; 
    text-align: center;
    margin-bottom: 50px;
}

.template_container ul li { 
    list-style-type: none; 
    display: inline; 
    text-align: center;
    zoom:1; 
    *display:inline;
}

.template_container ul { vertical-align: inherit; }
.template_container li { margin-left: 25px;}
.template_container img { 
    width: 180px;
    margin-bottom: 50px; 
    box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    -webkit-box-shadow: 0px 0px 10px #888;
    -khtml-box-shadow: 0px 0px 10px #888;
}

a.caption { 
    position: relative !important;
}
a.caption span { 
    background: #000; 
    background: rgba(0,0,0,0.8); 
    color: white !important; 
    display: none; 
    padding: 5px 10px !important; 
    text-align: center; 
    position: absolute !important;
    bottom: 0 !important; 
    left: 0 !important; 
}
a.caption:hover {
    text-decoration: none;
}

For those of you wondering about the <a class="caption"> and <span> elements within the list items, I have a javascript that displays those on hover.

UPDATE: I figured out my styling issues, I messed up and forgot to close the link and I accidentally added a <br /> at the end of the image tag, making it so the list wasn’t inline.

However I am still unable to see my images… still looking for a solution on that…

Answer 1

I think something is wrong with the image URL generation:

echo "<img src=\"http://URL-REMOVED.com/file_display.php?id=<?=" . $row['id'] . "\" alt=\"\" /><br />";

Why do you need the “< ? =” ? Why not just

echo "<img src=\"http://URL-REMOVED.com/file_display.php?id=" . $row['id'] . " alt=\"\" /><br />";