Squaring up Bio and Journal Text
Some of you don’t prefer the new wrapping of the text around the bio image; here is some code to get it to be squared up again:
#userBio {
width: 550px;
display: inline;
float: left;
position: relative;
}
.journal_entry .caption {
width: 325px;
display: inline;
float: left;
position: relative;
}
You may need to tweak the width of both to get them just right - and the journal code is a generic width, so it may not work for every single image on the page - you may want to switch to using the caption_id that is specifically assigned to each one.
September 13th, 2005 at 1:12 pm
Call it a strange matter of positioning… I’m using an HTML table on my bio near the top of http://www.cruizincapturz.com. That table has created some open space on the left for as long as the table tag is open. Once the table completes the text comes back to the left.
January 4th, 2006 at 1:09 am
I found a better way of doing this (only done on the journal style but I’m sure it works in the bio too). The issue can be seen on http://dgrin.smugmug.com/gallery/1075277. 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;
overflow:auto;
margin:0;
padding:0;
}
* html #journal .caption {/* for IE6 */
display:inline-block;
}
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 search 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?