Extra space below image

What would be causing the extra space underneath an image and the publication if there is no link associated with it?

It seems to look fine if it’s a link, but without one, it isn’t consistent with the others:

CSS:

<style type="text/css">
.listphotos {
    width:100%;
    margin: 0px;
    padding: 0px;
    list-style:none;
    text-align:center;
    font-family:arial; 
}
.listphotos li {
    display:-moz-inline-box;/* FF2 & under */
    display:inline-block;/* for modern browsers */
    vertical-align:top;
    margin: 0px 10px 10px 10px;
				padding: 0px;
				width: 152px; /*152-145*/
}

.listphotos li a {
    float:left;/*IE6/7 needs haslayout*/
    padding:0px;
    text-decoration:none;
				text-align: center;
}
.listphotos li a:hover {
    color:#000;
}
/*=== Testing CSS Round Corners ===*/
.listphotos,.listphotos li,.listphotos li a{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.listphotos li a{margin:-1px;}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.photolist ul li{
    display:inline;
    margin: 0px 10px 10px 0px;
}
</style>
<![endif]-->

CODE:

<ul class="listphotos">
<li><a href="http://www.fresnomag.com/files/digital-editions/2010/02-bg-summer/pageflip.html" target="_blank"><img src="imags/press_release/CVH_100607_FresnoMagAd_Final.jpg" width="132" height="172" alt="Fresno Magazine Bride & Groom Spring/Summer 2010" title="Fresno Magazine Bride & Groom Spring/Summer 2010 " /></a><br /> 
<span style="margin: 0px; font-size: 10px;"><a href="http://www.fresnomag.com/files/digital-editions/2010/02-bg-summer/pageflip.html" target="_blank">Fresno Magazine Bride & Groom Spring/Summer 2010<br />Spring/Summer 2010</a></span>
</li>
<li><img src="imags/press_release/CVH_100607_FresnoMagAd_Final_1.jpg" width="132" height="172" alt="Fresno Bride & Groom Spring/Summer 2010 Central Valley Historic Estates ad" title="Fresno Bride & Groom Spring/Summer 2010 Central Valley Historic Estates ad " />
<span style="margin: 0px; font-size: 10px;">Fresno Bride & Groom Spring/Summer 2010 Central Valley Historic Estates ad<br />July 2010</span>
</li>
<li><a href="http://iheartfresno.wordpress.com/2010/11/18/i-heart-fresno-weddings-location-location-location/" target="_blank"><img src="imags/no_img.jpg" width="132" height="172" alt="I Heart Fresno Wedding Location Online Article" title="I Heart Fresno Wedding Location Online Article"/></a><br /> 
<span style="margin: 0px; font-size: 10px;"><a href="http://iheartfresno.wordpress.com/2010/11/18/i-heart-fresno-weddings-location-location-location/" target="_blank">I Heart Fresno Wedding Location Online Article<br />November 18, 2010</a></span>

</li>
</ul>

Thanks for looking at this for me.

It seems that now the thumbnail images are not centering with the text. Any help would be appreciated!

See that mysterious gap under images.

cheers,

gary

THAT worked wonderfully!

What’s interesting is that I’ve added another section below it with similar code and now that text won’t center with the image…odd:

.photolist li img, .photolist li a img {
	display: block;
}
<h3 style="text-align: left;">Photos</h3>
<ul class="photolist">
<li><a href="imags/press_release/2011.jpg" rel="lightbox[2011.jpg]"  target="_blank"><img src="imags/press_release/2011.jpg" width="132" height="172" alt="Meedering It All" title="Meedering It All " /></a><br />
<span style="margin: 0px; font-size: 10px;"><a href="http://www.heather-visser.com/" target="_blank">Meedering It All<br />
October 10, 2010</a></span></li>
</ul>

What’s interesting is that I’ve added another section below it with similar code and now that text won’t center with the image…odd:

When you made the image a block, you lost the ability to use text-align: center on his parent to center him. Blocks can’t be centered that way (except in IE, but we’ll forget that).

The other option in Gary’s page will let you keep the img an inline element: change the vertical-align property to anything other than the default baseline
for example


.photolist li img, .photolist li a img {
	vertical-align: bottom;
}

Then he stays an inline but you still get rid of the annoying descender space : )

I did give that a go and I still can’t seem to get that extra item text to center with the image…little bugger.

Who is the extra item then??

The second anchor who is inside the span??

You are floating all the anchors in there though, right? Floats sit to one side.

<style type="text/css">
.listphotos {
    width:100%;
    margin: 0px;
    padding: 0px;
    list-style:none;
    text-align:center;
    font-family:arial; 
}
.listphotos li {
    display:-moz-inline-box;/* FF2 & under */
    display:inline-block;/* for modern browsers */
    vertical-align:top;
    margin: 0px 10px 10px 10px;
				padding: 0px;
				width: 152px; /*152-145*/
}

.listphotos li a {
    float:left;/*IE6/7 needs haslayout*/
    padding:0px;
    text-decoration:none;
				text-align: center;
}

.photolist li img, .photolist li a img {
	vertical-align: bottom;
}

.listphotos li a:hover {
    color:#000;
}
/*=== Testing CSS Round Corners ===*/
.listphotos,.listphotos li,.listphotos li a{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.listphotos li a{margin:-1px;}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.photolist ul li{
    display:inline;
    margin: 0px 10px 10px 0px;
}
</style>

My second row of item is:


<h3 style="text-align: left;">Photos</h3>
<ul class="photolist">
<li><a href="imags/press_release/2011.jpg" rel="lightbox[2011.jpg]"  target="_blank"><img src="imags/press_release/2011.jpg" width="132" height="172" alt="Meedering It All" title="Meedering It All " /></a><br />
<span style="margin: 0px; font-size: 10px;"><a href="http://www.heather-visser.com/" target="_blank">Meedering It All<br />
October 10, 2010</a></span></li>
</ul>

Neither the image nor the spanned link are centered. It’s funny, it has the same setup as the first row and the first row of content is accommodating, but not this one.

By the way, you’ve been a great help. That was a good link you sent me.

Neither the image nor the spanned link are centered.

You are posting CSS for someone called “listphotos” mostly (except for the vertical-align: bottom thing), but your HTML keeps talking about a “photolist”. So, two entirely different things who are totally not talking about each other.

(as a note: .photolist li img will also hit .photolist li a img as well)

Thanks for catching that. I copied the wrong CSS there:

.photolist {
    margin: 0px;
				padding: 0px;
    list-style:none;
    text-align:center;
				width: 100%;
}
.photolist li {
    width: 152px;
				display:-moz-inline-box;/* FF2 & under */
    display:inline-block;/* for modern browsers */
    vertical-align:top;
    margin: 5px 10px 10px 10px;
}

.photolist li a {
    float:left;/*IE6/7 needs haslayout*/
				text-align: center;
    padding: 0px;
    text-decoration:none;
}

.photolist li img {
	vertical-align: bottom;
}

.photolist li a:hover {
    color:#000;
}

.photolist,.photolist li,.photolist li a{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.photolist li a{margin:-1px;}

Thanks for the note. I just put the extra in there to keep things more accurate, but I got rid of it since it really wasn’t needed.