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/

[RoseW]

In news:MP******** *************** *@news.individu al.net,
Lauri Raittila <la***@raittila .cjb.net> typed:
| 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
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.infosystem s.www.authoring.stylesheets, RoseW wrote:

In news:MP******** *************** *@news.individu al.net,
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.infosystem s.www.authoring.stylesheets , Lauri Raittila
<la***@raittila .cjb.net> in
<MP************ ************@ne ws.individual.n et> wrote:

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

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

..thumb {display:inline ;}
..thumb {padding:5px;ve rtical-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.c om...

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;ve rtical-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.infosystem s.www.authoring.stylesheets, Matt Silberstein wrote:

On Fri, 16 Sep 2005 14:36:49 +0200, in
comp.infosystem s.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;ve rtical-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.infosystem s.www.authoring.stylesheets, Robi wrote:

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

Lauri Raittila wrote:

Stian Lund wrote:

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

.thumb {display:inline ;}
.thumb {padding:5px;ve rtical-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.infosystem s.www.authoring.stylesheets , Lauri Raittila
<la***@raittila .cjb.net> in
<MP************ ************@ne ws.individual.n et> wrote:

in comp.infosystem s.www.authoring.stylesheets, Matt Silberstein wrote:

On Fri, 16 Sep 2005 14:36:49 +0200, in
comp.infosystem s.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;ve rtical-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.individu al.net...

in comp.infosystem s.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;ve rtical-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.