Mike Lane
Jan-04-2006, 12:20 AM
There was a blog post on the smugblogs a while back about how to keep your journal style gallery captions from wrapping. It's a fine solution unless you find a gallery that has images that are less than 400px wide. This can happen if the original size of the image is narrower than 400px or perhaps if the image is a portrait orientation.
DavidTO asked me to make it so the dgrin tutorial and review pages (which are all done in the journal style smugmug galleries) would not wrap below the images. I started out with the blog post method but I wanted to find a way that would make it so the caption wouldn't look out of place if the image was narrow.
The issue can be seen on http://dgrin.smugmug.com/gallery/1075277. Like I said, some of the journal images are not wide enough to force the image to be 400px wide in the journal style itself. So if you force the caption to be only 325px wide, the captions for the narrower images look wierd.
The solution was elegant really and I stumbled onto it completely by accident (kind of like pencilin).
#journal .caption { /* for Firefox mostly */
min-height:20px; /* probably could use anything small - 1px even I bet */
overflow:auto;
margin:0; /* I just thought it looked better with no padding or margin */
padding:0;
}
* html #journal .caption {/* for IE6 */
display:inline-block; /* IE6 supports CSS 2.1 and Firefox doesn't??? */
}
The thing is (in firefox 1.5, not sure about safari or Opera) that when you have a min-height assigned with overflow:auto you get a peculiar effect whereabouts that element will only be as wide as the containing element minus the width of the floated element (in this case the .photo element). I’ve no idea why and a bit of a google search and css forums searching turned up nothing that would even suggest this behavior.
I thought all was lost for IE6 for a while though because it doesn’t support the min-height property. Although the height property is an approximation for the min-height property, if you use height with overflow auto you will get scroll bars in any browser and IE6 is no exception. Then I remembered that IE6 understands display:inline-block. I gave that a try and it worked!
So why would min-height:Xpx; overflow:auto; behave like display:inline-block? I’ve got no idea but it works! I wonder if it works in safari or Opera?
DavidTO asked me to make it so the dgrin tutorial and review pages (which are all done in the journal style smugmug galleries) would not wrap below the images. I started out with the blog post method but I wanted to find a way that would make it so the caption wouldn't look out of place if the image was narrow.
The issue can be seen on http://dgrin.smugmug.com/gallery/1075277. Like I said, some of the journal images are not wide enough to force the image to be 400px wide in the journal style itself. So if you force the caption to be only 325px wide, the captions for the narrower images look wierd.
The solution was elegant really and I stumbled onto it completely by accident (kind of like pencilin).
#journal .caption { /* for Firefox mostly */
min-height:20px; /* probably could use anything small - 1px even I bet */
overflow:auto;
margin:0; /* I just thought it looked better with no padding or margin */
padding:0;
}
* html #journal .caption {/* for IE6 */
display:inline-block; /* IE6 supports CSS 2.1 and Firefox doesn't??? */
}
The thing is (in firefox 1.5, not sure about safari or Opera) that when you have a min-height assigned with overflow:auto you get a peculiar effect whereabouts that element will only be as wide as the containing element minus the width of the floated element (in this case the .photo element). I’ve no idea why and a bit of a google search and css forums searching turned up nothing that would even suggest this behavior.
I thought all was lost for IE6 for a while though because it doesn’t support the min-height property. Although the height property is an approximation for the min-height property, if you use height with overflow auto you will get scroll bars in any browser and IE6 is no exception. Then I remembered that IE6 understands display:inline-block. I gave that a try and it worked!
So why would min-height:Xpx; overflow:auto; behave like display:inline-block? I’ve got no idea but it works! I wonder if it works in safari or Opera?