Why are my pictures laying on top of my table?

Posted on 2011-10-24
Last Modified: 2012-06-21
Head out to and click on the "Showdown Fans" tab. You'll see a Photo Gallery, but instead of the photos each laying neatly within the cells that they're assigned to, they're seemingly laying on top of the cells. By that I mean, the photo is actually sitting on top of the border of the cell and I need to fix that so I can better manipulate the position of the photo.

Attached is my php code. Where am I blowing it?
Question by:brucegust
    LVL 30

    Accepted Solution

    It looks like because your assigning heights to your #jukebox ul a. Kill the height on that class and they should fall into place.

    Assisted Solution

    If I'm right... it appears that your td.photo_gallery (line 25)
    text-align: center;
    width: 100px;
    height: 75px;
    does not match the size of your images == and when start getting into "rollovers" -- javascript calculates image size for positioning.
    When I look at the properties of your six Showdown Fan images-- they appear to be scaled down in height from 150px to 95px which is still to large for the td cell -- thus your overlap.

    My recommendation would be to resize your images to the same size as your td cell.
    LVL 7

    Assisted Solution

    CSS #jukebox ul a { LINE 240 is overriding td.photo_gallery LINE 25. The padding around line 240 is pushing it down and out.  Also, using HTML to re-size your image is not good practice.

    Gide the <a> tags there their own class.

    ALSO, now that I read every bodies response to your problem, it looks like every answer is correct.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Part of the Global Positioning System A geocode ( is the major subset of a GPS coordinate (, the other parts being the altitude and t…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    The viewer will learn how to count occurrences of each item in an array.
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now