why not try a css table.....
http://www.amazon.co.uk/exec/obidos/ASIN/0957921888/qid%3D1124464346/202-9689651-4231063
Chapter 5
or
http://www.w3.org/TR/REC-CSS2/tables.html
You would think if your read this list daily that using tables are the work
of the devil, when you can control them with css they are actually not so
bad....just not for the overall structure of the pages.
R.
----- Original Message -----
From: "Ingo Chao" <[EMAIL PROTECTED]>
Cc: <[email protected]>
Sent: Friday, August 19, 2005 3:49 PM
Subject: Re: [css-d] Thumb troubleshooting help needed
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/
______________________________________________________________________
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/
