Many improvements

[GoogleCodeExporter]

Hi i liked this htc file so i started using it. Then i noticed that some of
the stuff that i needed didn't work so i decided to improve it. The
attached file has all my work currently - some of the things are not
finished yet but since it is friday at the end of the workday and i will
not work on it till monday i decided to upload it anyway.
So here are the improvements i have been working on:
Support for border-top-right-radius: xx  type of css - it does not support
the shorthand property (border-radius: xx xx xx xx) and with that support
for drawing single corners instead of all four.
Correctly getting position and size for hidden elements - here i used code
from
http://blog.strictly-software.com/2009/10/correctly-measuring-element-dimensions
.html
which i have no idea if it is open source and can be used, but i think
there will be no problem - you better check it anyway.
Hover support - i just started this so it is mostly NOT working
Added support for parent to be position absolute too.

As far as i could test it is working on IE6,7,8 (except for :hover) and
there are without a doubt possible optimizations.

Original issue reported on code.google.com by atg...@gmail.com on 8 Jan 2010 at 3:38

Attachments:

• border-radius.htc

[GoogleCodeExporter]

Here is another version with fixes:
Limit the border radius according to the size of the box or else nasty stuff 
happens
Hopefully fixed Issue 19 - don't have that many curves in my design yet so i 
don't
know if it is really working... but it should.
And :hover support - i have no idea how well this is going to work in different 
cases
- for now it's working for me. In time if i find problems I'll fix them.

All my testing was done with strict doctype i have no idea how it will behave 
with
transitional or no doctype at all. 
Unfortunately all this tinkering has made the file quite big and probably 
slower -
mostly due to the hover support - if you don't need hover you can delete the
functions hoverSupport,getRulesFor,getRules and the call to hoverSupport inside
oncontentready()

Original comment by atg...@gmail.com on 12 Jan 2010 at 8:43

Attachments:

• border-radius.htc

[GoogleCodeExporter]

A small bugfix concerning curved elements without :hover

Original comment by atg...@gmail.com on 12 Jan 2010 at 8:53

Attachments:

• border-radius.htc

[GoogleCodeExporter]

Hi, I also started using it and made some improvements. Then I saw your work 
and I
liked the hover stuff. Now I made some changes to the one you made.
It has to do with resizing ao. Ex. if you have a width of 60% or if you change 
the
content of a div.
I also made some smaller adjustments to your code.

Original comment by oajamfi...@gmail.com on 15 Jan 2010 at 6:05

Attachments:

• border-radius.htc

[GoogleCodeExporter]

Ah yes :) I never tested the resizing.. It was probably even broken from my 
changes :) 
Thank you

Original comment by atg...@gmail.com on 16 Jan 2010 at 1:04

[GoogleCodeExporter]

omg thank you for this version now my joomla theme needs only 2 images for most 
of
the theme lol ie was fail until i used this
Thank You

Original comment by mortis2...@hotmail.co.uk on 30 Apr 2010 at 2:40

[GoogleCodeExporter]

The :hover works?

Original comment by morde...@hotmail.com on 30 Jul 2010 at 11:50

[GoogleCodeExporter]

The code fails on IE when using 'writing-mode: tb-rl;' and/or 'filter: flipv 
fliph;' I forget the specific combination, but it involved one or both of those 
attributes.

Original comment by wbomar.a...@gmail.com on 2 Aug 2010 at 1:55

[GoogleCodeExporter]

In IE8 I got an error: 
Permissions Denied.
border-radius.htc Row: 191 Char: 5
This is the row in HTC file:
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    var bottomRightArc = parseInt(elem.currentStyle['-moz-border-radius-bottomright'] ||
                                  elem.currentStyle['-webkit-border-bottom-right-radius'] ||
                                  elem.currentStyle['border-bottom-right-radius'] ||
                                  elem.currentStyle['-khtml-border-bottom-right-radius']);
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

The count of same errors corresponds to the count of occurencies of following 
in mz CSS:
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  -moz-border-radius-topleft: 5px; 
  -moz-border-radius-bottomright: 5px; 
  -webkit-border-top-left-radius: 5px; 
  -webkit-border-bottom-right-radius: 5px; 
  border-top-left-radius: 5px; 
  border-bottom-right-radius: 5px;
  behavior: url(C:/Users/Pavel/Desktop/MyPage/border-radius.htc);
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Where could be the problem?
Thanks
Pavel

Original comment by pavel....@gmail.com on 9 Jan 2011 at 11:49

[GoogleCodeExporter]

I have tried to use all of your versions in Issue 22 and the errors always 
appear on the same line.
Pavel

Original comment by pavel....@gmail.com on 10 Jan 2011 at 7:02

[GoogleCodeExporter]

I don't think you should be calling it like that:
behavior: url(C:/Users/Pavel/Desktop/MyPage/border-radius.htc);
more like:
behavior: url(http://mysite.xyz/border-radius.htc);
or just:
behavior: url(border-radius.htc);

IE's security probably prevents the script from accessing the styles and that's 
why it gives Permissions Denied

Original comment by atg...@gmail.com on 10 Jan 2011 at 2:28

[GoogleCodeExporter]

Thanks a lot, HTC works on my server. IE seems to be too active :) 
I figured out some other problems, but belonging to another issues...

Original comment by pavel....@gmail.com on 11 Jan 2011 at 5:32

[GoogleCodeExporter]

This does not seem to work properly in Internet Explorer 8. I have used the 
generic border-radius as well as -moz-border-radius and -webkit-border-radius 
(along with the individual corner specifications for each).

Using the specific ones, I have things working fine in Safari and Firefox (and 
I assume Chrome as well, though it's yet to be tested).

The issue with IE is that the display looks weird. In some areas, it hides text 
content, in one area it changed a background to black from transparent (the 
login box), and it did not seem to reliably curve the corners for all elements 
that had curved corners either. It seemed to work a little better in 
compatibility mode, but still not perfect.

We are using Drupal 6, and the site is here: http://test.fosterclub.com/

If there is no fix, I am going to have to comment out all reference to 
behavior:url(http://test.fosterclub.com/sites/all/themes/marinelli/border-radius
.htc) for instances where it appears to be problematic, and just let it degrade 
to square corners.

Any ideas on what the issue could be?

Thanks,
Emily

Original comment by emily.go...@gmail.com on 27 Feb 2011 at 12:59

[GoogleCodeExporter]

I am finding that the hover still does not work in IE, but it works in every 
other browser.  I am trying to hover over the area and have it change the 
border color, but it is not doing it.  Any help here would be greatly 
appreciated!

.curved {
    -moz-border-radius: 15px; /* Firefox */ 
    -webkit-border-radius: 15px; /* Safari and chrome */ 
    -khtml-border-radius: 15px; /* Linux browsers */ 
    border-radius: 15px; /* CSS3 */ 
    behavior:url('/trunk/scripts/border-radius.htc'); /* IE */
    }
.grayBox {
    padding: 4px;
    border: 2px solid #cdcdcd;
    }
.grayBox:hover {
    border: 2px solid #c64e00;
    }

                <div class="curved grayBox threeAcross bkgrndPictureText">
                    <a href="partners-user.html"><img src="/trunk/images/thumbnails/partners/user-generated.png" alt="User Generated Content" /></a>
                    <div class="pictureName">User Generated Content</div>
                </div><!-- end curved grayBox -->

Original comment by terts.ex...@yahoo.com on 15 Apr 2011 at 5:47

[GoogleCodeExporter]

many thanks

Original comment by premysl....@gmail.com on 23 Feb 2013 at 7:30