Re: Possible Bug: Group Avatar upload interface doesn\'t render
Not sure if this is a clue to the issue, but using FireBug to check the create avatar page css and html shows up a few things that I think are contributory …
<div style="width: 82px; height: 16px; position: relative; background-color: black;" class="jcrop-holder">
<div style="position: absolute; z-index: 300; width: 2px; height: 2px; top: 14px; left: 79px; display: block;">
<div style="overflow: hidden; width: 100%; height: 100%; z-index: 310; position: absolute;">
<img src="http://domain.com/wp-content/blogs.dir/1/files/group-avatars/2/cc-alphadevs.jpg" style="position: absolute; width: 82px; height: 16px; top: -14px; left: -79px;"/>
<div style="position: absolute; opacity: 0.4; top: 0px;" class="jcrop-hline"/>
<div style="position: absolute; opacity: 0.4; top: 1px;" class="jcrop-hline"/>
<div style="position: absolute; opacity: 0.4;" class="jcrop-vline"/>
<div style="position: absolute; opacity: 0.4; left: 1px;" class="jcrop-vline"/>
<div class="jcrop-tracker" style="cursor: move; position: absolute; z-index: 360;"/>
</div>
<div style="width: 100%; height: 100%; z-index: 320; display: block;"
<div style="cursor: n-resize; position: absolute; z-index: 370; width: 100%; height: 9px; top: -4px; left: -4px;"/>
<div style="cursor: s-resize; position: absolute; z-index: 371; width: 100%; height: 9px; top: -3px; left: -4px;"/>
<div style="cursor: e-resize; position: absolute; z-index: 372; width: 9px; height: 100%; top: -4px; left: -3px;"/>
<div style="cursor: w-resize; position: absolute; z-index: 373; width: 9px; height: 100%; top: -4px; left: -4px;"/>
<div style="cursor: n-resize; position: absolute; z-index: 374; top: -4px; left: -4px; opacity: 0.5;" class="jcrop-handle"/>
<div style="cursor: s-resize; position: absolute; z-index: 375; top: -3px; left: -4px; opacity: 0.5;" class="jcrop-handle"/>
<div style="cursor: e-resize; position: absolute; z-index: 376; top: -4px; left: -3px; opacity: 0.5;" class="jcrop-handle"/>
<div style="cursor: w-resize; position: absolute; z-index: 377; top: -4px; left: -4px; opacity: 0.5;" class="jcrop-handle"/>
<div style="cursor: sw-resize; position: absolute; z-index: 378; top: -3px; left: -4px; opacity: 0.5;" class="jcrop-handle"/>
<div style="cursor: nw-resize; position: absolute; z-index: 379; top: -4px; left: -4px; opacity: 0.5;" class="jcrop-handle"/>
<div style="cursor: ne-resize; position: absolute; z-index: 380; top: -4px; left: -3px; opacity: 0.5;" class="jcrop-handle"/>
<div style="cursor: se-resize; position: absolute; z-index: 381; top: -3px; left: -3px; opacity: 0.5;" class="jcrop-handle"/>
</div>
</div>
<div class="jcrop-tracker" style="width: 98px; height: 32px; position: absolute; top: -8px; left: -8px; z-index: 290; cursor: crosshair;"/>
<div style="overflow: hidden; position: absolute;">
<input type="radio" style="position: absolute; left: -30px; display: none;"/>
</div>
<img alt="Avatar to crop" class="avatar" src="http://domain.com/wp-content/blogs.dir/1/files/group-avatars/2/cc-alphadevs.jpg" style="position: absolute; width: 82px; height: 16px; opacity: 0.6;"/>
</div>
First thing that hit me is that there are an awful lot of unescaped <div>’s in there
Second thing that hit me was that it’s taking an uploaded image of 150px x 150px and only giving it 82px x 16px to display itself – add that to the “overflow:hidden” css command, and there’s no way the whole avatar is going to be allowed to display.
This looks to me like the avatar cropper is incomplete – both it’s code (php or js files) and its css file seem to be missing chunks of code – but then I’m no expert.
What do other people think?
