Bugzilla – Full Text Bug Listing
| Summary: | CSS Sprites rendering problem with sectional stylesheet on Firefox | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | [ECD] Orion | Reporter: | Szymon Brandys <Szymon.Brandys> | ||||||
| Component: | Client | Assignee: | Anton McConville <antonm> | ||||||
| Status: | RESOLVED FIXED | QA Contact: | |||||||
| Severity: | normal | ||||||||
| Priority: | P3 | CC: | susan, tomasz.zarna | ||||||
| Version: | 0.3 | ||||||||
| Target Milestone: | 0.4 M2 | ||||||||
| Hardware: | PC | ||||||||
| OS: | Windows 7 | ||||||||
| Whiteboard: | |||||||||
| Attachments: |
|
||||||||
Created attachment 208727 [details]
Page not resized, everything is fine
Created attachment 208728 [details]
Page resized, looks like we render two images from the sprite now
I'm seeing the same thing on "Commit details page" (bug 360472) after creating a span like this: var modification = dojo.create("span", null, horizontalBox); dojo.addClass(modification, "gitImageSprite"); dojo.addClass(modification, "git-sprite-modification"); Weird. I will take a look at this when I can use the page in a build. Maybe this is the first time we've had such a tall containing span and it's exposing a height problem. It looks like this is a FF problem, it is working on Chrome. I couldn't tell whether IE has the problem because there is a more general problem with this page on IE9. (opened bug 368047). Will investigate... Hmmm....I'm pretty sure this is a problem because the sprite is an inline-block span and its parent is in the box model. I'm seeing these warnings in the console (I'm not sure they are directly related but I think it's at least a hint to the problem). Warning: XUL box for div element contained an inline span child, forcing all its children to be wrapped in a block. If I look at the span in the debugger, I can see that its width/height are set (16px). Supposedly inline-block is supposed to fix the height of a span, which works elsewhere. Note that Chrome is working properly. I'm not sure if this is something we could call an FF bug, or if this combination of styling is simply causing some "unspecified" behavior that FF implements differently. It's possible that we could produce a sprite class (instead of gitImageSprite) that is box-savvy so that it plays well, but now I'm out of my league. I'll reassign this to Anton. fixed with Anton's updated CSS. |
I use code like this: dojo.create( "span", { "class":"gitImageSprite git-sprite-repository" }, horizontalBox ); to show images on my flat repo page. It works almost great, but when I resize the page horizontally, the sprite becomes broken. See the attached pictures.