SPAN with DIV features

[Jarek]

Hi all1

I need to create box of fixed size (width, height) containg formatted
text, but I need that this box will behave like span. I.e I need
somthing like this:

<SPAN><DIV>text</DIV></SPAN>

Generally this construction works as expected, but is not compiliant
with HTML 4.01 (validator says: document type does not allow element
"DIV" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON"
start-tag.).

How to fix it ?

Jarek

 

[Jukka K. Korpela]

I need to create box of fixed size (width, height) containg
formatted text,

You don't need that. (You might find use for a box that is dimensioned
using the em or ex unit, but that's a different story. It's very far from
fixed size, though it might do just what you need.)

(As usual, if you told us where you started, someone might be able to tell
where you got things wrong.)

but I need that this box will behave like span.

You don't a box of fixed size. But if you did, why wouldn't you make it a

I.e I need
somthing like this:

<SPAN><DIV>text</DIV></SPAN>

That's syntactically incorrect, and wrong by the very definitions of <span>

Generally this construction works as expected,

I have no idea of what "works" means here, and you give no hint.

but is not compiliant with HTML 4.01

Of course it isn't.

 

[Jarek]

You don't a box of fixed size. But if you did, why wouldn't you make it a
<span> element?

Ok. More details: I need to create some kind of buttons, which has
background image, fixed dimensions and some text inside, but I want to
use them like <span> so they will flow with text.

example:

This is some kind of text with [button] and another [button].

I hope now it is clear.

best regards
Jarek.

 

[Neredbojias]

With neither quill nor qualm, Jarek quothed:

You don't a box of fixed size. But if you did, why wouldn't you make it a
<span> element?

Ok. More details: I need to create some kind of buttons, which has
background image, fixed dimensions and some text inside, but I want to
use them like <span> so they will flow with text.

example:

This is some kind of text with [button] and another [button].

I hope now it is clear.

best regards
Jarek.

Since the w3c has apparently seen fit to make it impossible to format a
simple inline box, I recommend you use tables displayed as inline or
small graphics imposed with text.

 

[rf]

Ok. More details: I need to create some kind of buttons, which has
background image, fixed dimensions and some text inside, but I want to
use them like <span> so they will flow with text.

Still not enough detail.

What ever you achive with "fixed size buttons" some of your readers will
resize their font so the text *will* escape the fixed size.

Step back a couple of steps in your reasoning.

<back/> Whey do you need these buttons and why did you decide on "buttons"?

<back/> What is the pardigm you are trying to convey to your user? What is
the overall concept you are trying to convey?

Supply this detail and a whole new concept may be put forward.

 

[Jarek]

Jarek wrote:
What ever you achive with "fixed size buttons" some of your readers will
resize their font so the text *will* escape the fixed size.

I want to display some text on background image, like here:

<div style="background-image: url(image.png); width:100px; height: 50px;
text-align:center; line-height:50px;" onclick="someaction">
Some text
</div>

But I want to use it inline, just like <img ...> or <span...>

I hope now it is clear.

best regards
Jarek.

 

[rf]

I want to display some text on background image, like here:

<div style="background-image: url(image.png); width:100px; height: 50px;
text-align:center; line-height:50px;" onclick="someaction">
Some text
</div>

No, you don't. Well, you might want to but you don't need to.

You could explore display: inline-block but this doesn't work with IE.

However if you do this then your page *will* break when somebody changes
her font size. It might not break if you dimension the box using em rather
then px.

It looks very much like you really want an <a> element here. onclick is
javascript and so will not work with a proportion of your viewers. If it is
for something like navigation then it is a flaw.

But I want to use it inline, just like <img ...> or <span...>

I hope now it is clear.

No. You failed to answer these questions:

<quote>
<back/> Whey do you need these buttons and why did you decide on "buttons"?

<back/> What is the pardigm you are trying to convey to your user? What is
the overall concept you are trying to convey?
</quote>

Where is what you have so far? URL? Where is your "back of the envelope"
sketch of what you want? Even a picture might be adequate.

There are probably millions of pages out there that are doing what you are.
There are probably dozens of people here who could point you to exactly
what you want, if we only knew what you wanted, othere than simply putting
text inside a fixed box.

 

[Toby Inkster]

I need to create box of fixed size (width, height) containg formatted
text, but I need that this box will behave like span.

You're after:

<span style="display:inline-block">...</span>

Unfortunately, this is a new CSS 2.1 feature, and is only supported in
Opera 7+.

 

[Spartanicus]

You're after:

<span style="display:inline-block">...</span>

Unfortunately, this is a new CSS 2.1 feature, and is only supported in
Opera 7+.

And IE 5.5+, recent iCabs and KHTML based browsers such as Safari and
konqueror.

 

[Toby Inkster]

And IE 5.5+, recent iCabs and KHTML based browsers such as Safari and
konqueror.

IE's support is very hit-and-miss. The following (for example) won't work:

<div>la la la <p style="display:inline-block">foo<br>bar</p> la la la</div>

Not tested it in KHTML or iCab, but that's nice to know.

 

[Spartanicus]

IE's support is very hit-and-miss. The following (for example) won't work:

<div>la la la <p style="display:inline-block">foo<br>bar</p> la la la</div>

http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm