Stylesheets - span width/height from contained elements failing?

Author

span width/height from contained elements failing?

bugbear

2005-01-21, 12:17 pm

I've spent the last 2 days reading in waaay too much detail
the specs for CSS and HTML.

I am attempting something very simple. I wish to wrap
an image and caption in a span, so that the text can be centred
w.r.t the image, and a border (margin etc) be placed around them both.

This rapidly degenerated into an attempt to simple get
a span to be the size of a contained image.
I'll worry about the rest later.

My most careful reading of specs says that the following should
work. (I'm applying a bright red to make everything visible).

<html>
<head>
<title>test</title>
</head>

<style>

..big {
background-color: red;
padding:16px;
border:1px solid black;
}
</style>

<body>
<p>
<span class="big">
<img src="bigimg.gif" width="542" height="79"><br>
</span>
</p>

</body>
</html>

This should simply put a 16px red border around the image.

I get "strange" results, and they differ tremendously
amongst browsers. Only IE5.1.7 on MacOs9 gives the result
I want (which is not to say it's right of course).

Any advice and input would be more than welcome.

BugBear

Spartanicus

2005-01-21, 12:17 pm

bugbear <bugbear@trim_papermule.co.uk_trim> wrote:

>I've spent the last 2 days reading in waaay too much detail
>the specs for CSS and HTML.

I'd say you've not spent nearly enough time reading the spec.

>I am attempting something very simple. I wish to wrap
>an image and caption in a span, so that the text can be centred
>w.r.t the image, and a border (margin etc) be placed around them both.
>
>This rapidly degenerated into an attempt to simple get
>a span to be the size of a contained image.

Span defaults to inline, width specified on an inline element is ignored
as required by the spec.

>Any advice and input would be more than welcome.

Tell us what you are actually trying to achieve if you want help with
the real problem.

--
Spartanicus

bugbear

2005-01-21, 12:17 pm

Spartanicus wrote:
> bugbear <bugbear@trim_papermule.co.uk_trim> wrote:
>
>
>
>
> I'd say you've not spent nearly enough time reading the spec.

I know what you mean.

>
>
>
>
> Span defaults to inline, width specified on an inline element is ignored
> as required by the spec.

Absolutely. You may note in the sample that I don't attempt
to set a width on the span.

http://www.w3.org/TR/REC-CSS2/visud...-width-property
(quote)
This property does not apply to non-replaced inline-level elements. The
width of a non-replaced inline element's boxes is that of the rendered
content within them (before any relative offset of children).
(end quote)

This is exactly the behaviour I desire. My 2 days weren't wasted.

> Tell us what you are actually trying to achieve if you want help with
> the real problem.
>

I wish to associate/group an image and a caption, place a
coloured border around the 2 elements, and have the pair act as an
inline block.

BugBear

Spartanicus

2005-01-21, 12:17 pm

bugbear <bugbear@trim_papermule.co.uk_trim> wrote:

>I wish to associate/group an image and a caption

There is no proper markup available to express relationship between an
image and a caption. Some would use a table to do that, imo that's
inappropriate usage of the table element. There are different views on
what to use if not a table, most would advocate using a div to group the
two, I'm of the opinion that a paragraph element can be preferable.

>, place a
>coloured border around the 2 elements, and have the pair act as an
>inline block.

You've pretty much answered your own question here.

<div style="display:inline-block;border:1px solid red">
<img ...><br>
caption
</div>

Support for inline-block is limited, it's currently supported by recent
versions of Opera, Safari and iCab. It's also partially supported by
IE5+, but only on elements that default to inline.

It can be made more friendly to older browsers by setting the element to
inline-table first. The one problem that remains is Gecko based browsers
who lack support for any inline block element.

A cross browser (- Gecko) image & caption technique:
http://www.spartanicus.utvinternet....th_captions.htm
Borders can be added to this example.

--
Spartanicus

bugbear

2005-01-21, 12:17 pm

bugbear wrote:
>
>
> This rapidly degenerated into an attempt to simple get
> a span to be the size of a contained image.
> I'll worry about the rest later.

From further reading, it appears that I require
the new, exotic and widely unavailable
"inline-block".

Can anyone explaine WHY I need this, and what
point I'm missing about
"non-replaced inline-level elements"

BugBear

Steve Pugh

2005-01-21, 7:21 pm

bugbear <bugbear@trim_papermule.co.uk_trim> wrote:
>bugbear wrote:
>
> From further reading, it appears that I require
>the new, exotic and widely unavailable
>"inline-block".
>
>Can anyone explaine WHY I need this,

You want the container to (a) only be as wide as the content, and to
have multiple such containers in a row, but (b) otherwise behave like
a box. That's a combination of inline and block behaviours, so
inline-block makes sense.

>and what point I'm missing about
>"non-replaced inline-level elements"

The relationship between inline elements (such as your span) and the
one or more line boxes that they may encompass is complex, espevially
when you have an inline replaced element (such as your image) inside
them. The image extends the height of the line box but not the height
of the inline box, or is it the other way round? See I said it was
complex.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

bugbear

2005-01-26, 7:24 am

Steve Pugh wrote:
> bugbear <bugbear@trim_papermule.co.uk_trim> wrote:
>
>
>
> You want the container to (a) only be as wide as the content, and to
> have multiple such containers in a row, but (b) otherwise behave like
> a box. That's a combination of inline and block behaviours, so
> inline-block makes sense.

OK. I think I understand that. Since inline-block is not yet widely
supported, I'm using a partial emulation.

In my (JSP generated) html, I've created a custom tag called
inlineBlock. It generates a table with a single cell.

This appears, in all the browsers I've tested, to give me most
of the properties of inline-block (as far as I understand these
properties and am able to test them ;-)

BugBear