BTW border-image has spacing issues
The border-image wasn't working properly in IE8 64bit on Win 7. There were positioning issues that was causing spaces between the parts. I'm sharing it here in case someone else has this problem. This is what I changed to fix it:
Code:
setSizeAndPos('tl', widthL, widthT, 1, 0);
setSizeAndPos('t', elW - widthL - widthR, widthT, widthL - 1, 0);
setSizeAndPos('tr', widthR, widthT, elW - widthR, 0);
setSizeAndPos('r', widthR, elH - widthT - widthB, elW - widthR, widthT - 1);
setSizeAndPos('br', widthR, widthB, elW - widthR, elH - widthB - 1);
setSizeAndPos('b', elW - widthL - widthR, widthB, widthL - 1, elH - widthB - 1);
setSizeAndPos('bl', widthL, widthB, 1, elH - widthB - 1);
setSizeAndPos('l', widthL, elH - widthT - widthB, 1, widthT - 1);
setSizeAndPos('c', elW - widthL - widthR+2, elH - widthT - widthB+2, widthL-1, widthT-1);
Code:
// center fill
pieces['c'].style.display = '';
CSS:
Code:
.blue {
border-image: url(images/button/control/default.png) 8 8 8 8 stretch;
behavior: url(js/lib/PIE/PIE_uncompressed.htc);
border-width:9px;
}
Thanks for the awesome code.
Forums
