[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 220
  • Last Modified:

Why are my pictures laying on top of my table?

Head out to http://countryshowdown.com/Chevron/ 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?
3 Solutions
It looks like because your assigning heights to your #jukebox ul a. Kill the height on that class and they should fall into place.
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.
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.

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now