cFA wrote:
I'm trying to set up a page of thumbnails. I'm trying at
all costs to avoid floating in this case (which I usually do) because
ultimately I want all the thumbs centered. I've got it pretty close
only when I add a title the thumbs become one centered row. Ive tried
different display properties on the <p> tag within the "thumbwrap" but
so far I'm comin up short.
This layout of thumbs has to work in IE5x + (the image link
hovers/padding I can get later) But what is confusing me in this
situation is that this layout actually WORKS in ie5 and ie5.5 pc. It
fails in a modern browser, ...
http://aenonfiredesign.com/test/thumbs/
.thumbwrap { display: inline-block; } would be an easy solution, but
actually this works only in Opera (Fx fails to hold the image and the
caption with -moz-inline-box/-block)
So you could try an inline-block behavior for IE5+/Win (since they do
not support display: table/table-cell) and a table-cell/table attempt
for the others:
/*replace you rules with this */
.thumbcontainertop, .thumbcontainer2, .thumbcontainer3 { /* the rows */
margin: 15px auto 0 auto; /* auto center, and no width */
padding: 0;
background: rgb(85, 85, 85);
text-align: center; /* IE5+ */
display: table;
}
.thumbwrap { display: table-cell;}
.thumbcontainer2 { margin-top: 5px;}
.thumbcontainer3 { margin-top: 5px; margin-bottom: 15px;}
and in the html, at the end of the <head>
<!--[if IE]><style>
.thumbwrap {
zoom: 1;
height: 0;
display: inline; /* together: inline-block equivalent IE5+Win */
}
</style><![endif]-->
</head>
Works for me in IE5.5/6, Fx/Dp, Opera7.54/8
But I fear this is not the end of the story.
---
Wouldn't it be better to float them? Once could say that centering is
not that important.
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
