|
|
Posted by Ben C on 02/16/07 22:05
On 2007-02-16, Steven Saunderson <phelum@Syd.au> wrote:
> I am trying to improve my page that displays multiple images so the
> number of images per row will depend on the window width. My previous
> attempt uses a table with two columns but this relies on the window
> being approximately 800px wide.
>
> Each image should have a caption centered underneath. I first tried
> div's and float but this left-justifies the images and I would prefer a
> centered display.
If you want to centre the images, you're right, floating them is off.
display: inline-block would be perfect, but is not supported by FF or
IE. You have no choice but to use tables.
If it wasn't for the captions, you could leave the images as inline and
give the container text-align: center.
> I am now using inline tables where each table contains one image and its
> caption. This seems to work but the CSS is quirky to get things to work
> in Opera, FF, and IE.
>
> The test page is <http://phelum.net/images/LMLR/2007-02-01/>. The CSS
> is in the file.
>
> For each table Opera needs display:inline-table, but FF and IE need
> display:inline. I can accommodate IE by using a conditional comment but
> for FF I need :
>
> table.image
> {
> width: <?php echo ($thumbwidth + 8);?>px;
> display: inline; /* FireFox uses this */
> display: inline-table; /* Op uses this, FF ignores it */
> }
>
> Can anybody suggest a better way to achieve a centered display of
> maximum images per row with captions underneath ?
I don't know of a better way (that works in all these browsers).
Navigation:
[Reply to this message]
|