Images with captions centered?

[Stian Lund]

Hello,
I've been struggling with this problem for a while now, so I though I'd
get some input from anyone more skilled with CSS than I am.

I'm actually trying to accomplish two things with this:

1. Create a floated image with text around, with a caption centered
underneath. Image size can be varied but the caption needs to have a
fixed size to make it break correctly I think. I also need the image to
resize automatically when the browsers width gets very small, using the
'max-width' attribute, and this is where the problem lies, since Firefox
does not seem to accept the max-width attribute and handles it like the
image is non-existent or very small. It works like expected in MSIE 6 and
Opera 8.

2. Inspired by a 'A List Apart' article (see [1] below), I'm trying to
create a fluid way to display images with captions, but with the image-
display *centered* and with the possibility of different image sizes (ALA
had fixed image sizes). I've tried many different solutions but recently
tried using 'display: image-block' which judging from the CSS 2.1
standard should be the way to go, and it works perfectly in Opera but
fails totally in FF and MSIE, who just displays the images one below the
other.

I know the first problem can be fixed by not using max-width but I'd
really like to have it work with it. I guess Opera is the only browser
supporting on-the-fly resizing of images this way, is this correct?

As to the second problem, my guess is that using another solution than
inline-block would solve it but I've tried display:block and different
wrapper classes. Floating to the left would do it but I really want the
images centered, not to the left.

Is there a standards-compliant way to make this work in both Opera, FF
and MSIE?

I have created a test case for both problems here:
http://stian.freeshell.org/test/float/float.html

Could someone please have a look at this and give me some hints to what I
can do to fix the problems or improve the methods I'm using?

reagards,
Stian

links:
[1] http://www.alistapart.com/articles/practicalcss/

[Els]

Stian Lund wrote:

Hello,
Hi :-)
I've been struggling with this problem for a while now, so I though I'd
get some input from anyone more skilled with CSS than I am.

I'm actually trying to accomplish two things with this:

1. Create a floated image with text around, with a caption centered
underneath. Image size can be varied but the caption needs to have a
fixed size to make it break correctly I think. I also need the image to
resize automatically when the browsers width gets very small, using the
'max-width' attribute, and this is where the problem lies, since Firefox
does not seem to accept the max-width attribute and handles it like the
image is non-existent or very small. It works like expected in MSIE 6 and
Opera 8.

2. Inspired by a 'A List Apart' article (see [1] below), I'm trying to
create a fluid way to display images with captions, but with the image-
display *centered* and with the possibility of different image sizes (ALA
had fixed image sizes). I've tried many different solutions but recently
tried using 'display: image-block' which judging from the CSS 2.1
standard should be the way to go, and it works perfectly in Opera but
fails totally in FF and MSIE, who just displays the images one below the
other.

I know the first problem can be fixed by not using max-width but I'd
really like to have it work with it. I guess Opera is the only browser
supporting on-the-fly resizing of images this way, is this correct?
I'm not sure if the max-width will work in combination with the
example I give below, but I'm interested in the results when you try
it out.
As to the second problem, my guess is that using another solution than
inline-block would solve it but I've tried display:block and different
wrapper classes. Floating to the left would do it but I really want the
images centered, not to the left.

Is there a standards-compliant way to make this work in both Opera, FF
and MSIE?

I have created a test case for both problems here:
http://stian.freeshell.org/test/float/float.html

Could someone please have a look at this and give me some hints to what I
can do to fix the problems or improve the methods I'm using? [...] [1] http://www.alistapart.com/articles/practicalcss/

Feel free to scrutinize the code:

http://locusmeus.com/test/thumbswith...scentered.html

The reason for the tables is that I had images of different heights,
which I wanted vertically centered per row.

--
Els http://locusoptimus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Juicy Lucy - Who Do You Love?

[Spartanicus]

Stian Lund <st************ ***@operamail.c om> wrote:

2. Inspired by a 'A List Apart' article (see [1] below), I'm trying to
create a fluid way to display images with captions, but with the image-
display *centered*
http://www.spartanicus.utvinternet.i...h_captions.htm
and with the possibility of different image sizes

You'll have to specify a width for each wrapper.

--
Spartanicus

[Stian Lund]

Spartanicus <in*****@invali d.invalid> wrote in
news:pd******** *************** *********@news. spartanicus.utv internet.ie:

http://www.spartanicus.utvinternet.i...ery_with_capti
ons.htm

Thanks for the pointer, a very good solution, although maybe not as
'intuituve' as the ALA one. However, I would rather not have to specify
the width in the img tag, while the width in '#gallery span' is ok since
it controls the captions wrapping, which is important.

I tried removing the width and height attributes and inserting some
larger images (250+300px) -- it still seems to work nicely in Firefox and
MSIE, but Opera insists on layering the images over each other if they
are larger... grr :/

Removing 'display: inline-block' from #gallery span solves this
fortunately :), but I don't know what problems this might cause with
other browsers since I only have FF, MSIE and Opera. Also, the caption is
not centered under the image in MSIE.

Example:
http://stian.freeshell.org/test/float/spartanicus.htm

I'm aware it doesn't look very good, but it's a bit closer to what I
wanted...

Any other ideas or tips?

Stian

[Spartanicus]

Stian Lund <st************ ***@operamail.c om> wrote:

I tried removing the width and height attributes and inserting some
larger images (250+300px) -- it still seems to work nicely in Firefox and
MSIE, but Opera insists on layering the images over each other if they
are larger... grr :/
Works fine in my demo, must be your code.
Removing 'display: inline-block' from #gallery span solves this
fortunately :), but I don't know what problems this might cause with
other browsers since I only have FF, MSIE and Opera. Also, the caption is
not centered under the image in MSIE.

Works fine in my demo, must be your code.

--
Spartanicus

[Stian Lund]

Spartanicus <in*****@invali d.invalid> wrote in
news:et******** *************** *********@news. spartanicus.utv internet.ie:

I tried removing the width and height attributes and inserting some
larger images (250+300px) -- it still seems to work nicely in Firefox
and MSIE, but Opera insists on layering the images over each other if
they are larger... grr :/

Works fine in my demo, must be your code.

You are correct of course, it IS my code - sorry if you misunderstood -
what I did was use your demo, remove the width and height attributes from
the img tags and put in some larger images.

The example I put on the site was the one which also *worked* in Opera,
here is one which does not:
http://stian.freeshell.org/test/float/opera.htm

Opening this in Opera 8.02 you can see how the larger images get put
underneath the butterflies. I'm not criticizing your demo, I'm just asking
*why* this happens in Opera while it works in MSIE and FF... if anyone
knows.

Your demo is great and I'll probably adopt the modified version on my
pages.

Stian

[Spartanicus]

Stian Lund <st************ ***@operamail.c om> wrote:

I tried removing the width and height attributes and inserting some
larger images (250+300px) -- it still seems to work nicely in Firefox
and MSIE, but Opera insists on layering the images over each other if
they are larger... grr :/

Works fine in my demo, must be your code.

You are correct of course, it IS my code - sorry if you misunderstood -
what I did was use your demo, remove the width and height attributes from
the img tags and put in some larger images.

The example I put on the site was the one which also *worked* in Opera,
here is one which does not:
http://stian.freeshell.org/test/float/opera.htm

Opening this in Opera 8.02 you can see how the larger images get put
underneath the butterflies. I'm not criticizing your demo, I'm just asking
*why* this happens in Opera while it works in MSIE and FF... if anyone
knows.

Did you even bother to look at the code, or read the article?

You can't just plonk other images into my code, my code contains the
width suitable for *my* 172px wide images. If you want to use it with
other images you'll have to change that.

--
Spartanicus

[Stian Lund]

Spartanicus <in*****@invali d.invalid> wrote in
news:v9******** *************** *********@news. spartanicus.utv internet.ie:

Did you even bother to look at the code, or read the article?
Yes, I did, and I'm dropping this right now, as it seems we are
constantly misunderstandin g each other :/
You can't just plonk other images into my code, my code contains the
width suitable for *my* 172px wide images. If you want to use it with
other images you'll have to change that.

I'm *aware* of that, I was merely using your code as a template to see if
I could make something out of it that worked for my uses. As I said I did
not want to specify the widths per image, and your demo only works with
images of the same width. If I have offended you by utilizing your code
this way I am sorry.

Here's what I've found:

With display: inline-block Opera needs to have width of the image set
explicitly while FF and MSIE apparently don't need to. I suspect that
Operas behaviour is the *correct* one though. Luckily, Opera supports
inline-table as well and it works the way I want it, while MSIE does not,
so I just need to use the inline-block hack to make IE display it like I
want.

Working on it... thanks for all help!

Stian

[Stian Lund]

Stian Lund <st************ ***@operamail.c om> wrote in
news:Xn******** *************@1 30.225.247.90:

1. Create a floated image with text around, with a caption centered
underneath. Image size can be varied but the caption needs to have a
fixed size to make it break correctly I think. I also need the image
to resize automatically when the browsers width gets very small, using
the 'max-width' attribute, and this is where the problem lies, since
Firefox does not seem to accept the max-width attribute and handles it
like the image is non-existent or very small. It works like expected
in MSIE 6 and Opera 8.

Still no further on this ... anyone have any ideas on how to fix it, or any
information on how FF handles max-width for images?

Stian

[Lauri Raittila]

in comp.infosystem s.www.authoring.stylesheets, Stian Lund wrote:

With display: inline-block Opera needs to have width of the image set
explicitly while FF and MSIE apparently don't need to.
I thought it was Gecko that don't get inline-block without width...
Working on it... thanks for all help!

Here is example:
http://www.student.oulu.fi/~laurirai/www/css/gallery/

No widths or heights needed, works in big 3 (versions 6, 8, 1 tested)

I would be interested to know support in other browsers, especially KHTML
based, and new Geckos

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>