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.jpg

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.