For the life of me I cannot figure out what is wrong with this code that it doesn’t work:
#products .150top {
display:inline-block;
vertical-align: middle;
height: 165px;
width: 350px;
font-size:0.9em;
text-align:center;
position:relative;
margin: 10px 5px 40px 0;
}
#products .150top img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#products .150top span {
display:block;
margin-top: 170px;
font-size:0.9em;
}
I modelled it on this code, which DOES work:
#products .cover {
display:inline-block;
vertical-align: middle;
height: 270px;
width: 200px;
font-size:0.9em;
text-align:center;
position:relative;
margin: 10px 5px 40px 0;
}
#products .cover img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#products .cover span {
display:block;
margin-top: 270px;
font-size:0.9em;
}
The only difference between the two areas of the page is the shape of the image. In the bottom one, the image is 200 px wide by 263 px tall. In the top, non-working example, the image is 350 px wide by 163 px tall. I have been staring at this code for what feels like hours and fiddled with the various margin settings to no avail. No matter what I set the “150top” to, it doesn’t change.
I did get a suggestion to insert a br tag in front of the span tag and that does force the words under the image but it still doesn’t make the images sit side by side.
The page is at http://xcitingideas.baremetal.com/Canada150-test.php - as you will see, the smaller images at the bottom have perfect captions; the top ones do not. What makes it really frustrating is that I have a different page with the same smaller pics but a taller area for the captions, as some are 5 lines tall, and I had no problem at all getting that to work. I just don’t get what’s wrong with the “150top” version. Can anyone spot what dumb thing I’ve done? :>)