Whats wrong with this img html markup

I have a page that shows images and the images are really looking messed up :) This is how the page looks like:

http://www.comehike.com/outdoors/parks/park.php?park_id=15

See on the right side middle the images are looking very messy. And when I try to do view source, t开发者_JAVA百科he html below is what I get. But from just looking at it, it looks reasonable - no?

<a href="http://www.comehike.com/hikes/hike_image.php?hike_photo_id=&photo_path=http://www.comehike.com/img/hiking_photos/108_101/full_DSC_2822.JPG"><img src="http://www.comehike.com/img/hiking_photos/108_101/small_DSC_2822.JPG" style="border: none;" /></a>

I see two issues. One is, some of the image links are broken, so every other image is not loading. The second is, the images are contained in a div with explicit dimensions, and the contents do not fit inside the div and they are flowing out over the top of the content below.

You can set the 'overflow' css attribute to auto and it will add scrollbars, or you could remove the explicit height property and have the rest of the layout flow (probably preferred).

a). use width and height attributes of <img> b). u may need to increase the height of the <div> within which these images are located or set it to style="min-height: 50px";

Some of your images have an empty src:

<a href="http://www.comehike.com/hikes/hike_image.php?hike_photo_id=&photo_path=http://www.comehike.com/img/hiking_photos/108_2/cannon3.jpg">
  <img src="" style="border: none;" />
</a>