Community
Participate
Working Groups
I need to add decorators to icons in my navigator tree. For instance each 'folder' icon in my tree may have a decoration in top-right and bottom-right corners. Since there may be many of these decorations, creating an icon variant per each combination does not look good. I started using css layers but I'm not sure how to use it together with recently used sprites
can you get me an HTML/CSS snippet of what you are doing now to create the overlays, and I'll try a sprited equivalent. In general I got rid of image tags and replaced with spans that were display:inline-block I'm not sure how that plays with layers...
dojo.create("img", {src: "image.gif", style: "vertical-align: middle;"}, div); dojo.create("img", {src: "decoration_ovr.gif", style: "vertical-align: middle; position:relative; left:-12px; z-index:2;"}, div); z-index does the trick. Of course I use images instead of styles now. But I could use styles and use z-index in css.
(In reply to comment #2) > dojo.create("img", {src: "image.gif", style: "vertical-align: middle;"}, div); > dojo.create("img", {src: "decoration_ovr.gif", style: "vertical-align: middle; > position:relative; left:-12px; z-index:2;"}, div); > > z-index does the trick. Of course I use images instead of styles now. But I > could use styles and use z-index in css. I don't think sprites should cause any trouble here. Several options: 1 - you can retain the img element, using "none.png" as the image src. Then add classes to the images for the sprite background and the position in the sprite. The sprites rely on background-position, not position, so there should not be a conflict here. So assuming you have some CSS such as: .mySprite { vertical-align: middle; background: url(../images/core_sprites.png) no-repeat top left; } .myOverlay { position: relative; left: -12px; z-index: 2; } you can use: dojo.create("img", {src: "none.png", class: "mySprite core-sprite-image"}, div); dojo.create("img", {src: "none.png", class" "mySprite core-sprite-decoration_ovr myOverlay"}, div); - where possible i have gotten rid of img elements (to eliminate the need for the none.png). I use a span instead, and assign "imageSprite" class which ensures the inline-block and other necessary css. Again, these classes don't use position or z-index, so I think you should be fine. Example: dojo.create("span", {class: "imageSprite core-sprite-image"}, div); dojo.create("span", {class" "imageSprite core-sprite-decoration_ovr myOverlay"}, div);
Thanks. I'll try this out and confirm that it works.
This is new again!
Closing as part of a mass clean up of inactive bugs. Please reopen if this problem still occurs or is relevant to you. For more details see: https://dev.eclipse.org/mhonarc/lists/orion-dev/msg04002.html
