471,605 Members | 1,369 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

Yet another problem with inline-block

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:

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:
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.
Oct 9 '07 #1
14 1867
7,435 Expert 4TB
'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.
Oct 9 '07 #2
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.
Oct 9 '07 #3
7,435 Expert 4TB
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.
Oct 9 '07 #4
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.
Oct 10 '07 #5
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.
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.
Oct 10 '07 #6
7,435 Expert 4TB
But doesn't -moz-inline-block do what you want?
Oct 10 '07 #7
uuffff... finally I've managed to display what I need. I have one more question though:
two css definitions:
Expand|Select|Wrap|Line Numbers
  1.     display: -moz-inline-block;
  2.     display: inline-block;
Expand|Select|Wrap|Line Numbers
  1.     display: inline-block;
  2.     display: -moz-inline-block;
are not the same (IE behaves differently). could someone explain me why?
Oct 10 '07 #8
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:
<td style="text-align: center">
<span style="display: -moz-display-block">test</span>
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?
Oct 10 '07 #9
7,435 Expert 4TB
Are you using a doctype?
Oct 10 '07 #10
indeed. I've tried all doctypes I found on this site:
none of them helped.
Oct 11 '07 #11
7,435 Expert 4TB
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.
Oct 11 '07 #12
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:
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.
Oct 11 '07 #13
7,435 Expert 4TB
Ah! Now I get it. And the answer is, I don't know, but I'll find out.
Oct 11 '07 #14
7,435 Expert 4TB
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.
Oct 11 '07 #15

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Nicolas Payre | last post: by
9 posts views Thread by tonysuper | last post: by
1 post views Thread by mouli | last post: by
3 posts views Thread by shuisheng | last post: by
2 posts views Thread by bingo | last post: by
1 post views Thread by Richard Tobin | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.