CSS Sprites / background position w/ solution

[GoogleCodeExporter]

What steps will reproduce the problem?
- Apply rounded corners to an element using a positioned background

What is the expected output? What do you see instead?
- Expected the vml fill to be positioned too, instead saw the unpositioned 
sprite source file

What version of the product are you using? On what operating system?
- Nov 2009

The background position attribute obviously wasn't be applied to the used vml 
fill object. However, I managed to figure out a bugfix for this -> see the 
attached file, it also includes a fix to a bug where vml is not shown when 
rounded corners are applied to display:none elements.

Feel free to distribute if you like.

Original issue reported on code.google.com by MageSage...@gmail.com on 13 Aug 2010 at 12:42

Attachments:

• rounded-corners.htc

[GoogleCodeExporter]

There is a related issue where an element with a border will be drawn in the 
wrong place. Rather than drawing the border around the element like HTML does, 
VML draws the border over the partly image.

For example, if you have a 10px border, 5px will get drawn before the image 
starts, and 5px will get drawn over the image itself.

To be consistent with HTML, the background position needs to be moved across 
(and down) half the border width:

It's a simple fix to your existing code.

var fillPositionX = 
parseInt(this.currentStyle.backgroundPositionX.replace('px', '')) + 
Math.ceil(this.currentStyle.borderLeftWidth.replace('px', '')/2);

var fillPositionY = 
parseInt(this.currentStyle.backgroundPositionY.replace('px', '')) + 
Math.ceil(this.currentStyle.borderTopWidth.replace('px', '')/2);

There is still a problem though. CSS allows defining image position using, for 
example "bottom left". I don't know how to implement this.

Original comment by thejkwhosaysni@gmail.com on 20 Aug 2010 at 1:33