Caption sized to width of /floated/ image?

[Michael Rozdoba]

I've tried to apply something along the lines of
http://www.spartanicus.utvinternet.i...d_to_image.htm
to a floated span containing an image & caption, but I can't find
anything that'll work in IE - floating seems to break it.

Can it be done without having to specify each image's width explicitly?

The best related info I could find was posted here a few days ago, but
doesn't seem to work with floats in IE, unless I'm just having another
too late night.
http://groups.google.co.uk/groups?hl...oogle%2BSearch

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Chris Leipold]

Hi,

I've tried to apply something along the lines of
http://www.spartanicus.utvinternet.i...d_to_image.htm
to a floated span containing an image & caption, but I can't find
anything that'll work in IE - floating seems to break it.

I tried to get spartanicus' proposal working, but like you discovered,
IE isn't very cooperative... I had luck; our graphic-department wanted
fixed-sized divs, therefore it's no longer my problem :-)
But I fear this problem can not be solved (without scripting).

Chris

[Spartanicus]

Michael Rozdoba <mr**@nowhere.invalid> wrote:

I've tried to apply something along the lines of
http://www.spartanicus.utvinternet.i...d_to_image.htm
to a floated span containing an image & caption, but I can't find
anything that'll work in IE - floating seems to break it.
Floating should break it, css 2.1 specifies that floated elements should
use a shrink to fit method when no width is specified (IE has always
used a shrink to fit method for floats).

width:inherit on the caption's block level container won't help here,
IIRC only specified widths can be inherited (not computed widths).
Can it be done without having to specify each image's width explicitly?

Specifying a width on the containing block is always best, anything else
is sub optimal.

--
Spartanicus

[Michael Rozdoba]

Chris Leipold wrote:

[ http://www.spartanicus.utvinternet.i...d_to_image.htm
& floats ]

I tried to get spartanicus' proposal working, but like you discovered,
IE isn't very cooperative... I had luck; our graphic-department wanted
fixed-sized divs, therefore it's no longer my problem :-)
But I fear this problem can not be solved (without scripting).

Indeed. Thanks for the feedback.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Michael Rozdoba]

Spartanicus wrote:

Michael Rozdoba <mr**@nowhere.invalid> wrote:

I've tried to apply something along the lines of
http://www.spartanicus.utvinternet.i...d_to_image.htm
to a floated span containing an image & caption, but I can't find
anything that'll work in IE - floating seems to break it.

Floating should break it,

I wondered but didn't check - it was too late into the morning.
css 2.1 specifies that floated elements should
use a shrink to fit method when no width is specified (IE has always
used a shrink to fit method for floats).

width:inherit on the caption's block level container won't help here,
IIRC only specified widths can be inherited (not computed widths).

I think I tried that along with a few less rational stabs in the dark.

Can it be done without having to specify each image's width explicitly?

Specifying a width on the containing block is always best, anything else
is sub optimal.

Hm. Shame. I hate having to inline styles, even if it is only width. At
least in this case I can. In other situations this would rule out static
pages & require program code, albeit with a choice of client or server side.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Christoph Paeper]

*Michael Rozdoba* <mr**@nowhere.invalid>:

I've tried to apply something along the lines of
http://www.spartanicus.utvinternet.i...d_to_image.htm
to a floated span containing an image & caption, but I can't find
anything that'll work in IE - floating seems to break it.

span {width: expression(this.firstChild.width);}

where the 'span' contains the 'img' as its first child, would do, but is
of course not correct CSS. In an intranet it may be tolerable, but
shouldn't be used out on the Web.

Is it a gallery of images with captions or some images illustrating a
larger text inline?

Some test-pages of mine:
<http://webdesign.crissov.de/temp/css-d/captions-zoe.html>,
<http://webdesign.crissov.de/temp/ciwas/image-captions-table.html>.

--
No sig today, my .sig has gone away
The divider stands forlorn, a symbol of the dawn
No sig today, it seems a common sight
But people reading by don't know the reason why

[Michael Rozdoba]

Christoph Paeper wrote:

*Michael Rozdoba* <mr**@nowhere.invalid>:

I've tried to apply something along the lines of
http://www.spartanicus.utvinternet.i...d_to_image.htm
to a floated span containing an image & caption, but I can't find
anything that'll work in IE - floating seems to break it.

span {width: expression(this.firstChild.width);}

where the 'span' contains the 'img' as its first child, would do, but
is of course not correct CSS. In an intranet it may be tolerable, but
shouldn't be used out on the Web.

Agreed. Interesting to know about the options though. I assume that's an
IE thing? Or does Moz allow similar access to the DOM within CSS? BTW
Does the above rely on the img element in the html having the width
specified, or does it actually calculate it from the image's file?
Is it a gallery of images with captions or some images illustrating a
larger text inline?
The latter, as part of a small website for a course of mine.
Some test-pages of mine:
<http://webdesign.crissov.de/temp/css-d/captions-zoe.html>,
<http://webdesign.crissov.de/temp/ciwas/image-captions-table.html>.

Thanks :)

--
Michael
m r o z a t u k g a t e w a y d o t n e t