Inline-block problem with Firefox

Forgot the links?

Demo of problem

Sorry!

Matte,

Have you given us a sketch or something that shows exactly what you want, disregarding the method? If not, make a mock-up in Gimp or OpenOffice or whatever. Show the indentions, outsets, etc.

I'm becoming confused about what we're trying to accomplish.

cheers,

gary

Is it:

-moz-inline-block

or

-moz-inline-box

Sorry about that. It's correct in the code for the oWrapper class.

Gary, yes I can do a demo drawing of the entire indent, but i felt i would keep it simple for this illustration.

Basically, the first example is what I am trying to achieve, but with the oWrapper span added, with display: inline-block/box so the width can be controlled. Otherwise, it would look the same as what is there in that first example.

If you really need the entire drawing, i can do that.

Yeah, do a drawing. Include measurements, if you can, eg., size of images, spacing between them, how much outdent, does text wrap under the icons, is this related to the enumeration thingie and are there nested indentions, does the icon block indent or just the text.

cheers,

gary

Ok, here's a simple demo drawing of the ultimate objective of all of this.

Outline text

Does this help?

I guess you have found a reason why -moz-inline-box isn't stable enough to be in the browser. For some reason Firefox isn't giving any height to the element. If you give it height the image may or may not appear (that's using Firebug).

To fix the issue, give the two innner spans display:-moz-inline-box.

Thanks again Chris. Now you'd think I would have tried that hours ago, eh? Well, in fact, I had tried that. But. um.. well.. I suppose it might have helped if I had used the property "-moz inline-box" and not "-moz inline-block" in that test. Doh! (Glares at Hugo)

Proof is example 5 at bottom.

Thanks all. Now, with some luck, I can finally finish this damn thing.

Now for a couple more questions:

The two icons are pretty much standardized in GUIs to mean the same thing, there's more to be seen. Are they separate or redundant to one another? If redundant, why, and if not, what are they indicating?

Are either to be active? That is, does clicking on one do something? Like uncollapse the TOC or open a file?

Will either change in response to some action? I.E., folder opens, or arrow points downward?

//edit: There seems to have been a lot going on as I re-studied the issue—well, that and took a little nap.

cheers,

gary

Gary,

The icons are just placeholders. The yellow folder will be one of many item types. The Arrow (trigger btn, sometimes called a disclosure button) will sometimes be the conventional Plus/minus button. It all depends on the nature of the outline application. We have at least 5 app contexts, and more coming. But all of them will involve one or two icons. The trigger arrow will have events, and both will have hover images, but mostly for eyewash.

The reason for all the numbering control, is to find a generalized numbering solution that can easily be adapted to about 6 common numbering techniques, as OL/ULs cannot be used at all (as we know how frail they are).

I had to do some housekeeping, so the last demo was moved.
Previous demo now here

I am not implementing what we have thus far, and praying there are no new show stoppers. This problem got old a week ago

You might want to look at the following, too. The html is simpler and more intuitive.

/**/

cheers,

gary

Fails the copy and paste test completely. Txt appears on new line after number.

Assuming you have an idea for that, would it be be essential that there be imgs, and not the same spans as in my version? IMG tags cannot be changed nearly as easily for states and different themes, as can spans and CSS. Otherwise, I do like the apparently simplicity, but when I add in all else that we need, not sure there's a net gain.. but I will study it... if you think the newline problem can be fixed. I have my doubts.

Thanks so much for the attempts

Ok, I tested further.

Assuming image wrap could be fixed in copy and paste, the other problem I see is this: You've replaced the outdenting of the number with a dual-margin indenting scheme, whereby both the number and text paragraphs are siblings. While this works well for this particular numbering style (which effectively resembles columns on each row), it would fail when used for a more flowing numbering style where the text wraps under numbers with many decimal levels. That would require a whole different structure. (And there are 3+ more numbering styles yet to be resolved.)

While there can be a general solution that covers a lot of the layout, specific issues may require different structures, and most certainly will require different style rules.

Look at this:

/**/

Wrapped version. May be used with simple decimal
enumeration.

cheers,

gary

You've made it copy and pastable, but when I add actual images (leaf.gif), the indenting breaks up completely. My demo (with images added)is here. I have not spent too much time at it, but am not seeing what causes this. I guess just the indents need tweaking somewhere, but I would assume you tried it locally, so I can't understand why it would break.

All I have done is reference some actual images. Nothing else was changed (except removing some BRs to test wrapping).

Your version is here (without images).

Does your working page work? Can you publish it here?

Again, is there some reason you are using IMG elements, and not CSS behind spans, as we did before? Changing images out for different item types is very awkward. Will spans change the entire logic?

I need to decide on this pretty soon, as the days are marching on. Why exactly do you favor this over the outdenting using -moz inline-box? It seemed that worked well, finally, but you seem convinced this approach is best. I trust your judgment, but trying to understand it better. The other works fine, but I get the sense you must see some problem with it, downstream, that I am missing.

FF and IE are ok, but Opera has the line feed after number problem again :bigoops:

PS
IE7 is does not have the indent problems. Opera and Firefox do