Yet another problem with inline-block

[vytas]

hello all,

i have very irritating problem with spans and firefox. I'm developing simple form designer, where user can drag and drop "components " (like labels, textboxes etc) on the form and save it for later use. it looks something like that:
http://www.dxlxb.com/vz/formdesigner.jp g

now, I need to display a span OR a div in a table cell when user drops a "control". the problem is that div takes all available space in a cell, so I've decided to go ahead with spans. everything works fine if span content is not wrapped in a cell. here are some examples:
http://www.dxlxb.com/vz/test.html
as you can see, option 2 is what I'm trying to achieve. could someone give me any idea how to create span or div which looks like option 2 in IE6+ and FF?

p.s. I've tried using divs instead of spans - as I understand I need to add float: left to force div not to take all available space, but then vertical alignment is very wrong.

thanks in advance.

[drhowarddrfine]

'inline-block' doesn't work in Firefox so you must use the -moz version. inline-block' only works in IE when the contents are actually 'inline' such as text in a <p>. I don't think text in a <td> qualifies as such.

<span> works fine in all browsers so that won't be the issue.

Make sure you are testing with a strict doctype otherwise IEs broken box model may get in your way.

[vytas]

as I said - span doesn't work as I want in FF when text in it is wrapped. please review my testing page to see what I'm talking about.

[drhowarddrfine]

I think I understand now. You are trying to get the red outlines to wrap around the whole text? If so, you can still use a <div> but, since this is text, why don't you use a <p>? In both cases, you can just set margins, position absolute and to keep that to one spot inside the <td> while leaving room for the other things.

[vytas]

yes, exactly, I want outlines to wrap around the whole text. and actually I have no idea why I didn't try p tag - if p can be converted to inline block, that it's suitable for me. I'll try that and post another reply in case that won't work.

[vytas]

ok, I'm starting to rip my hair of - I'm trying to achieve something so simple, but can't make this work on FF.
I'll reformulate my question:
I need to display an inline-block object (span, p, div, whatever). since FF doesn't support inline-block, I'm using -moz-inline-stack. the problem is - if content in span or p is wrapped, FF shows only first line.
examples:

http://www.dxlxb.com/vz/test.html

in IE, tests #2, 3 and 4 are fine, thats exactly what I need. in FF though non of them works. how can I force FF show spanned content?

p.s. the reason I'm not using div is that divs take all available space, which is not what I need.

[drhowarddrfine]

But doesn't -moz-inline-block do what you want?

[vytas]

uuffff... finally I've managed to display what I need. I have one more question though:
two css definitions:

	display: -moz-inline-block;
	display: inline-block;

and

	display: inline-block;
	display: -moz-inline-block;

are not the same (IE behaves differently). could someone explain me why?

[vytas]

But doesn't -moz-inline-block do what you want?

DAMN IT!!!!!!!! -moz-inline-block DOESN'T work if I add text align on table cell. for example:
[HTML]<table>
<tr>
<td style="text-align: center">
<span style="display: -moz-display-block">test</span>
</td>
</tr>
</table>[/HTML]
in this case span will be block, and not inline block (i.e. will take all space available). if I remove text-align - everything works fine. any suggestions?

[drhowarddrfine]

Are you using a doctype?

[vytas]

indeed. I've tried all doctypes I found on this site:

http://htmlhelp.com/tools/validator/doctype.html

none of them helped.

[drhowarddrfine]

I'm just confused about what you are trying to do because I'm working on my own stuff. I don't understand why you say you must use inline-block and then it seems it must be under several other conditions. When I use the strict doctype, which is the only one you should always use, and -moz-inline-block, it appears to me to do what you want. However:

It might be best for you to restate the problem along with the conditions because wading through the other posts trying to piece it together isn't working.

[vytas]

right, I understand that my posts are chaotic. but my problem didn't change - I can't make inline-block work on FF. here's updated sample:

http://www.dxlxb.com/vz/test.html

as you can see, second test is NOT an inline-block in FF, because span takes all available space (in other words it's a block, not an inline-block). I have a strict doctype in my html, so if you could explain how to force FF show inline-block, I would be very thankful.

[drhowarddrfine]

Ah! Now I get it. And the answer is, I don't know, but I'll find out.

[drhowarddrfine]

So apparently FF does not do -moz-inline-block the exactly the same as a CSS2 inline-block behavior. To control the size of the block, you can just add 'width' and 'height' but I see that the text spills out of that. I've read that some people try something with 'table-cell' and 'table' in cSS but I don't know what.

Here's one thing I have in my notes but don't know from where:

inline-block could be substituted using the following:

overflow: auto;
display: block;
float: left;
margin: 0 auto;

the float property flushes block elements onto the same line. float elements are not acknowledged by surrounding block elements (separate block context) unless 'overflow: auto' property applied to those block elements.