17 replies [Last post]
matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

I am trying to wrap two spans, each with background images, inside an inline-block span -- which will allow me to set the span's width.

All is well other browsers, but NOT firefox. Icons don't appear, unless I remove the display: -moz inline-block (needed by Firefox).

I must be able to set the width of that span for outdenting purposes (discussed in other threads).

Here are demos of the problem.

I pray i am misssing something, because I MUST have that adjustable outer span.

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 4 years 50 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

matte wrote: Here are demos

matte wrote:

Here are demos of the problem.

Forgot the links? Wink

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

Ooops. The links

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Matte, Have you given us a

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Is it:

Is it:

-moz-inline-block

or

-moz-inline-box

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

Sorry. it was "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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Yeah, do a drawing.

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

The demo

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

Outline text

Does this help?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I guess you have found a

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.

matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

You da man!

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

matte wrote:Does this

matte wrote:
Does this help?

Quite a bit.

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

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

Sorry,. Demo moved

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 Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

You might want to look at

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






/**/






1



Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.






1.1



Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.






1.1.1



Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.






1.1.1.1



Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.






1.1.2



Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.




cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

It does look simpler..but.. uh

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

matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

Ok, I tested

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

While there can be a general

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:






/**/






1

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.





1.1

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.





1.1.1

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.





1.1.1.1

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.





1.1.2

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.



Wrapped version. May be used with simple decimal
enumeration.




1

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.





1.1

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.





1.1.1

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.





1.1.1.1

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.





1.1.2

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Nullam id eros fringilla velit.


cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

Well.. this is very close, but

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.

matte
matte's picture
Offline
Enthusiast
Last seen: 12 years 4 weeks ago
Joined: 2004-03-18
Posts: 142
Points: 0

Copy and paste problems with opera

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