On 9/06/2009, at 8:40 AM, David Laakso wrote:
> Debbie Campbell wrote:
>> In this page:
>>
>>
>>> http://www.redkitecreative.com/projects/fink/expertise.php
>>>
>>
>> I'm using display: table-cell and vertical-align for the paragraph
>> text
>> to the right of each thumbnail image, but this isn't working in
>>
>
> Umm. Don't exactly know. Maybe???:
> .content-list-block p {border: 1px solid red;
> /*margin: 0;*/ margin: 0;padding-top: 18px;
> /*padding: 0;*/
> font-weight: bold;
> font-size: 1.1em;
> display:table; line-height: 1;
> /*height: 54px;*/
> /*line-height: 1.3em;*/
> /*display: table-cell;vertical-align: middle;*/
> }
> Please see: <http://chelseacreekstudio.com/ca/cssd/link.htm>
Another option is inline-block...
.content-list-block img {
display: -moz-inline-box; /* only for FF2 backwards
compatibility */
display: inline-block; /* change display */
float: none; /* remove float as is forces display:
block. Not
required if it's inline-block. */
margin-right: 10px; /* Might as well be pixels if the
container is */
vertical-align: middle; /* set vertical align */
}
.content-list-block p {
display: -moz-inline-box; /* only for FF2 backwards
compatibility */
display: inline-block; /* change display */
padding-top: 0; /* reset padding */
padding-bottom: 0;
vertical-align:middle; /* set vertical align */
width: 210px; /* Set a width to your inline-block. */
}
You can make inline-block work in < IE8 by setting display to inline
and forcing hasLayout (in IE only stylesheet. e.g.
.content-list-block p, .content-list-block img { display: inline;
zoom: 1; }
See: http://snadden.com/sandbox/expertise.html
Cheers, Tim
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
