Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups
web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





  Last Thread  Next Thread
Author
Thread Post New Thread   

span width/height from contained elements failing?
 

bugbear




quote this post edit post

IP Loged report this post
Old Post  01-21-05 - 05: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


[  Post Follow-Up to this message ]
Re: span width/height from contained elements failing?
 

Spartanicus




quote this post edit post

IP Loged report this post
Old Post  01-21-05 - 05: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


[  Post Follow-Up to this message ]
Re: span width/height from contained elements failing?
 

bugbear




quote this post edit post

IP Loged report this post
Old Post  01-21-05 - 05: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


[  Post Follow-Up to this message ]
Re: span width/height from contained elements failing?
 

Spartanicus




quote this post edit post

IP Loged report this post
Old Post  01-21-05 - 05: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:
[url]http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm[/ur
l]
Borders can be added to this example.

--
Spartanicus


[  Post Follow-Up to this message ]
Re: span width/height from contained elements failing?
 

bugbear




quote this post edit post

IP Loged report this post
Old Post  01-21-05 - 05: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


[  Post Follow-Up to this message ]
Re: span width/height from contained elements failing?
 

Steve Pugh




quote this post edit post

IP Loged report this post
Old Post  01-22-05 - 12:21 AM   
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/>


[  Post Follow-Up to this message ]
Re: span width/height from contained elements failing?
 

bugbear




quote this post edit post

IP Loged report this post
Old Post  01-26-05 - 12:24 PM   
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


[  Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 10:14 AM. Post New Thread   
  Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top