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.com> 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*****@invalid.invalid> wrote in
news:pd********************************@news.spart anicus.utvinternet.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.com> 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*****@invalid.invalid> wrote in
news:et********************************@news.spart anicus.utvinternet.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.com> 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*****@invalid.invalid> wrote in
news:v9********************************@news.spart anicus.utvinternet.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 misunderstanding 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.com> wrote in
news:Xn*********************@130.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.infosystems.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>

[RoseW]

In news:MP************************@news.individual.ne t,
Lauri Raittila <la***@raittila.cjb.net> typed:
| in comp.infosystems.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
At the example page (link above) in the code to start listing the
thumb images -
what does the div class='thumbS' refer to?
<div class='thumbs'><div class='thumb'>

RoseW

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, RoseW wrote:

In news:MP************************@news.individual.ne t,
Lauri Raittila <la***@raittila.cjb.net> typed: | Here is example:
| http://www.student.oulu.fi/~laurirai/www/css/gallery/ At the example page (link above) in the code to start listing the
thumb images - what does the div class='thumbS' refer to?
<div class='thumbs'><div class='thumb'>

Nothing. It was left there from earlier version, which was not working on
Gecko. It is not needed, IIANM (you never know what IE does...)

This version uses bug in gecko that makes tables with display:inline
inline-table.

It is strange that gecko has not enabled display:inline-table, as it
works to set element to table using css (with display:table-row or table-
cell) and then setting display:inline.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Matt Silberstein]

On Fri, 16 Sep 2005 14:36:49 +0200, in
comp.infosystems.www.authoring.stylesheets , Lauri Raittila
<la***@raittila.cjb.net> in
<MP************************@news.individual.net> wrote:

in comp.infosystems.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

Could you explain a bit of the code to me? Here is the excerpt:

..thumb {display:inline;}
..thumb {padding:5px;vertical-align:middle;}
..thumb {display:inline-block;}
..thumb {display:inline-table;}
..thumb > a, .thumb > div {display:table-row;}

Doesn't that end up with display having the value inline-table? And
what does the '>' do in the last line?

--
Matt Silberstein

Do something today about the Darfur Genocide

Genocide is news | Be A Witness
http://www.beawitness.org

"Darfur: A Genocide We can Stop"
www.darfurgenocide.org

Save Darfur.org :: Violence and Suffering in Sudan's Darfur Region
http://www.savedarfur.org/

[Robi]

Matt Silberstein wrote in message news:sr********************************@4ax.com...

Lauri Raittila wrote:

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

Could you explain a bit of the code to me? Here is the excerpt:

.thumb {display:inline;}
.thumb {padding:5px;vertical-align:middle;}
.thumb {display:inline-block;}
.thumb {display:inline-table;}
.thumb > a, .thumb > div {display:table-row;}

Doesn't that end up with display having the value inline-table?

http://www.w3.org/TR/REC-CSS1#display
in css1 'display' has only values of: block | inline | list-item | none
so the last two would be invalid anyway

http://www.w3.org/TR/REC-CSS2/visure...ropdef-display
in css2 there is no inline-block value for the display anyway
'display'
Value: inline | block | list-item | run-in | compact | marker |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group |
table-column | table-cell | table-caption | none | inherit
and since all values are "or" |, you are correct that the last one will decide.

http://www.w3.org/TR/2003/WD-css3-co...30514/#display
CSS3 will be somehow different ;-)
And what does the '>' do in the last line?

http://www.w3.org/TR/CSS2/selector.html#q1
should explain everything

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Matt Silberstein wrote:

On Fri, 16 Sep 2005 14:36:49 +0200, in
comp.infosystems.www.authoring.stylesheets , Lauri Raittila:

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

Could you explain a bit of the code to me? Here is the excerpt:

.thumb {display:inline;}

This is for IE to support inline-block and Gecko (see later)
.thumb {padding:5px;vertical-align:middle;}
.thumb {display:inline-block;}
This is for IE and other browsers not implementing inline-table
.thumb {display:inline-table;}
For Opera 4+
.thumb > a, .thumb > div {display:table-row;}
For Gecko, makes outer element table with display:inline
Doesn't that end up with display having the value inline-table?
Yes. So any ideal browser gets this right.
And what does the '>' do in the last line?

Just a selector, as this line is not needed for IE, it doesn't matter if
it doesn't get > selector.

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

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Robi wrote:

Matt Silberstein wrote in message news:sr********************************@4ax.com...

Lauri Raittila wrote:

Stian Lund wrote:

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

.thumb {display:inline;}
.thumb {padding:5px;vertical-align:middle;}
.thumb {display:inline-block;}
.thumb {display:inline-table;}
.thumb > a, .thumb > div {display:table-row;}

Doesn't that end up with display having the value inline-table?

Only if browser regognizes it.
http://www.w3.org/TR/REC-CSS1#display
in css1 'display' has only values of: block | inline | list-item | none
so the last two would be invalid anyway http://www.w3.org/TR/REC-CSS2/visure...ropdef-display
in css2 there is no inline-block value for the display anyway
'display'
But it works in IE5+ (with display:inline in IE6 standards). Correct
behaviour by CSS2 is to ignore it, and that is just fine.
http://www.w3.org/TR/2003/WD-css3-co...30514/#display
CSS3 will be somehow different ;-)

See CSS21. I know it is not REC, but there is nothing better, exept CSS1.

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

[Matt Silberstein]

On Sat, 24 Sep 2005 08:09:20 +0200, in
comp.infosystems.www.authoring.stylesheets , Lauri Raittila
<la***@raittila.cjb.net> in
<MP************************@news.individual.net> wrote:

in comp.infosystems.www.authoring.stylesheets, Matt Silberstein wrote:

On Fri, 16 Sep 2005 14:36:49 +0200, in
comp.infosystems.www.authoring.stylesheets , Lauri Raittila:

>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

Could you explain a bit of the code to me? Here is the excerpt:

.thumb {display:inline;}

This is for IE to support inline-block and Gecko (see later)

.thumb {padding:5px;vertical-align:middle;}
.thumb {display:inline-block;}

This is for IE and other browsers not implementing inline-table

.thumb {display:inline-table;}

For Opera 4+

.thumb > a, .thumb > div {display:table-row;}

For Gecko, makes outer element table with display:inline

Doesn't that end up with display having the value inline-table?

Yes. So any ideal browser gets this right.

And what does the '>' do in the last line?

Just a selector, as this line is not needed for IE, it doesn't matter if
it doesn't get > selector.

Thanks for this help and thanks to Robi for the links.
--
Matt Silberstein

Do something today about the Darfur Genocide

Genocide is news | Be A Witness
http://www.beawitness.org

"Darfur: A Genocide We can Stop"
www.darfurgenocide.org

Save Darfur.org :: Violence and Suffering in Sudan's Darfur Region
http://www.savedarfur.org/

[Robi]

Lauri Raittila wrote in message news:MP************************@news.individual.ne t...

in comp.infosystems.www.authoring.stylesheets, Matt Silberstein wrote:

On Fri, 16 Sep 2005 14:36:49 +0200, Lauri Raittila:

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
Could you explain a bit of the code to me? Here is the excerpt:

.thumb {display:inline;} //[1]
.thumb {padding:5px;vertical-align:middle;}
.thumb {display:inline-block;} //[2]
.thumb {display:inline-table;} //[3]
.thumb > a, .thumb > div {display:table-row;} //[4]

Doesn't that end up with display having the value inline-table?

Yes. So any ideal browser gets this right.

[1] This is for IE to support inline-block and Gecko (see later)
[2] This is for IE and other browsers not implementing inline-table
[3] For Opera 4+
[4] For Gecko, makes outer element table with display:inline

And what does the '>' do in the last line?

Just a selector, as this line is not needed for IE, it doesn't matter if
it doesn't get > selector.

It is simply amazing, the concoctions you need to do to support certain
browsers while it's also amazing what browsers don't support.

Honestly, sometimes I wonder how authors keep on developing websites
while bending backwards to allow just about any browser to access their
website.