zitob9 / curved-corner Goto Github PK

If a floating div is inside the original div, the XY coordinates of the 
rounded rect are wrong (it's offset 10-15 pixels down and to the right of 
the original rect)

What steps will reproduce the problem?
1. In example border-radius.html, add a background color to the .rel CSS 
declaration.

What is the expected output?
The rounded-corner elements as displayed in the unaltered border-
radius.html.

What do you see instead?
.box1 - no borders, no background color
.box2 - not visible (text content is visible with contrasting background 
color for the parent element)
.box3 - no background color

What version of the product are you using? Current.

On what operating system?
Windows XP Pro SP3;
Windows Vista Ultimate SP1;
Windows 7 Professional;
Windows Server 2003 R2

Please provide any additional information below.
Modify the CSS declarations for the border-radius.html included in the 
examples zip to add a background-color to the .rel element.  No other 
changes are needed to duplicate this problem.

The .htc calculates the z-index of the rounded-corner element to (X)-1, 
making it lower than that of the parent element (the .rel <div> in this 
case) and placing it behind the parent element when the page renders.

Also reproduced in other mark-up pages, but since it is easily reproduced 
in the included demo mark-up, just use it.

You can try my modification of the script (attached) and feel free to 
incorporate any of the changes. The primary goal was to fix the problem of 
hiding the block if parent elements' background is set. Works great for me.

Full list of changes:
- VML element is now positioned as a first child of the original box with 
z-index of -1 (this fixes the problem of hiding the VML if parent node has 
background set)
- More correct positioning that takes parent node margins into consideration
- Stroke is now propely hidden if its weight is 0
- wrapped body in <public:component> per .HTC specification

When elements inside the roundedrect change, it does not resize accordingly.

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?


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


Please provide any additional information below.

The background VML doesn't seems to resize when the page is resized.

It works if my border-radius is 10px, but not if it's 1em.

I can work around this, so not critical, but would be good to support all
valid values.

would be desirable to called it like : 

    behavior: url(border-radius.htc?q="1em 2em 4em 0em");

Or 

    behavior: url(border-radius.htc?q="0 0 0 1em");

or 

    behavior: url(border-radius.htc?q="top-left:3em;");

sometimes i don't use the same border radius measuerments for all browsers.

What steps will reproduce the problem?
1. browser shows some content with rounded div 
2. Ajax call updates div content
3. Div height stays the same.

What is the expected output? What do you see instead?
Expected ouptut is that div has to change their height. Instead of it it 
says the same before ajax calling.

What version of the product are you using? On what operating system?
IE8

-moz-linear gradient(),-moz-radial-gradient() and
-webkit-gradient(linear|radial) all exist

I know that it is possible to use either -ms-filter or vml eg
<v:rect fillcolor="red">
<v:fill ID="grad" color2="blue" type="gradient" angle="180">
</v:rect>

which will do a gradient (the example given will transition from red at the
top to blue at the bottom - change angle="90" to do a left to right gradient)

I just can't work out how to generate this from a -moz-linear-gradient

Any help gratefully received

What steps will reproduce the problem?
load the attached file with border-ratius.htc in same directory using IE8

What is the expected output? What do you see instead?
gives "unexpected call to method" error on line 98

What version of the product are you using? On what operating system?
v3 on XP with IE8.

What steps will reproduce the problem?
1. Include the behavior on a div.
2. Include a filter [e.g. filter:
progid:DXImageTransform.Microsoft.Shadow(Color=#FFFFFF, strength=5,
direction=45); ]

What is the expected output? What do you see instead?

Expected to see an element with a drop shadow and rounded corners.

Instead see the shadow applied to the text, not the element.


What version of the product are you using? On what operating system?
IE7-8 on XP. Reproducable on Vista.

Please provide any additional information below.

Saw similar when used in conjunction with the DropShadow filter.

Attaching an HTML file with all CSS rules in there. Can check in Firefox
for the desired results. Remove the behavior and you'll see it is basically
the same, excluding the lack of rounded corners.

What steps will reproduce the problem?
1. uploaded the .htc file to the root folder of my site
2. placed <base href="http://mywebsite.com/"> in the head section 
3. checked in IE6 and the rounded corners not working. removed the base
href and it is working

What version of the product are you using? On what operating system?
IE 6 windows XP

What steps will reproduce the problem?
1. Create a border around a text-block (div) 
2. Style font inside block with Cufon
3.

What is the expected output? What do you see instead?
Expect to see a border around the text block with rounded corners. 
Corners and border work OK but text disappears


What version of the product are you using? On what operating system?
IE8 on Windows XP
IETester on WinXP



Please provide any additional information below.
http://github.com/sorccu/cufon

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.

What steps will reproduce the problem?
1. :hover do not work on A element doesn't works

What is the expected output? What do you see instead?
- Nothing

What version of the product are you using? On what operating system?
Windows XP, IE7


Please provide any additional information below.
- Try yourself

What steps will reproduce the problem?
1. Add doctype (eg xhtml transitional)
2. Reload page

What is the expected output? What do you see instead?
That the corners be rounded. They're not.

What version of the product are you using? On what operating system?
Latest version as of today. I'm using Vista Business with IE8. I also 
tried IE7 on XP Pro - it works there. 


Please provide any additional information below.

Example doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

When resizing window, and element width is set in percents, script is not 
resizing element.
For example, element width is set to 50%. When page is loaded, element 
width is correct, but if I resize window, element width not changing. 

What steps will reproduce the problem?
1. Create a DIV with style="border: 1px solid red"
2. Add style border-top-left-radius to curve top left corner
3. Style border-top-left-radius doesn't work

What is the expected output? What do you see instead?
I want to get curved top left corner but it isn't curved.


What version of the product are you using? On what operating system?
Win7. IE8. I've just downloaded the code.


Please provide any additional information below.

I'm using border radius styles to make a tab effect by setting the radius
on the top-left and top-right borders.

Unfortunately this doesn't seem to be supported by this htc file.

Would this be possible as an addition?

Thanks.

Applying this HTC to a <td> table cell results in all styles (including
borders) on the <td> cell being removed.

Applying it to a <table> gives a correctly rounded border, but the whole
table turns solid black, obscuring the table contents.

Applying it to a <tr> table row appears to have no effect at all.

Once the .htc code is added, the browser redirects "to a blank page", so
says my IE-using boss.

I'm using whatever the latest version of curved-corner is, on debian linux,
using nginx as a webserver. (htc is correctly defined asa mime type)

When you specify a Doctype the behavior seems break somewhere

<!DOCTYPE HTML PUBLIC>
<html>
<head>
<style type="text/css">
*{
    margin:0 auto;
    padding:0;
    text-align:center;
}
div{
    width:279px;
    height:255px;
    background:#000;
    border:red solid 1px;
    margin-bottom:20px;
    color:#fff;
    text-align:center;
}
.curved {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(border-radius.htc);
}
</style>
</head>

<body>

<div class="curved">div con curvas</div>

</body>
</html>

I've found a workarround with the compatibility mode metatag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This fix rules, but unfortunately does not work with Drupal PHPtemplate 
engine.. :(

tried using the demo .html page, just changing extension to .tpl.php 
(PHPtemplate extension) and it does not work anymore.

Anyone can shred some light or quick solution? This fix would be really great 
while waiting that IE9 becomes a standard (years)..   

cheers

What steps will reproduce the problem?
1. Browse demo page with IE8.
2.
3.

What is the expected output? What do you see instead?
content get redrawn but all curved borders are lost. sort of works in 
compatibility mode but not perfectly.

What version of the product are you using? On what operating system?
IE 8.0.6001

Please provide any additional information below.

What steps will reproduce the problem?
1. Include Prototype v1.6.1 in your test page
2. Refresh your IE8 browser
3.

What is the expected output? What do you see instead?
"We were unable to return you to the page you were viewing. Internet
Explorer has stopped trying to restore this website"

What version of the product are you using? On what operating system?
HTC dated Nov 18 2009, IE 8.0.6001.18702, WinXP SP3

Please provide any additional information below.

I used the newest File, but had no strokes as there is "stroke=false" in
the file. I reverted this to "strokewidth & strokecolor" like in the older
file, and it works for me like a charm in IE8(Vista)/IE7(XP)/IE6(XP)

I also changed the behavior off the width and height of the v:roundrect
element. Using this.offsetH/W instead of this.currentStyle.width/height
does also work if the div has no height and width. This also worked for me
on IE8(Vista)/IE7(XP)/IE6(XP)

greets

File attached

What steps will reproduce the problem?
1. Copy & paste code below to a text file rename .html
2. Load the page in IE7 and see no div rounded corners
3. Delete the line <div style="clear: both;"> </div> reload and see rounded
corners.

What is the expected output? What do you see instead?
Whats happening is that the rounded div does exist however it is behind the
container div. You can see it as the page renders. 

What version of the product are you using? On what operating system?
XP IE7

Please provide any additional information below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background-color: #000;
    font: normal 11pt Trebuchet MS,Arial,sans-serif;
}

.header {
    background-color: #003399;
    height: 150px;
}
#container {
    background-color: #FFFFFF;
}
.content {
    background-color: #33FFCC;
    float: left;
    width: 200px;
}
.round-corner {
    float: left;
    background-color: #666666;
    width: 420px;
    height: 220px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    behavior: url(border-radius.htc);

}
.footer {
    background-color: #3366CC;
    clear: both;
    height: 40px;
}
</style>
</head>


<body>
<div class="header"></div>
<div id="container">
    <div class="round-corner"></div>
    <div class="content"></div>
    <div style="clear: both;"> </div>
</div>

<div class="footer"></div>
</body>
</html>

Hi, I am developing a spanish website that uses border-radius.

I try that looks the same in all browsers, but I cant because boder-radius
dont work.

I add the MIME types on CPanel.

This is my web: http://acquafarma.net/online/

The left menu uses a Mootools script called MenuMatic that use border-radius

The code is here: http://acquafarma.net/online/css/MenuMatic.css

/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {    
    /*border around submenu goes here*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-color:#d2e0ea;
    border-radius: 8px;
    behavior:url(border-radius-ie8.htc);
    /*-ms-border-radius:8px 8px 8px 8px; */
    background:#d2e0ea; 
    border:1px solid #21942c; 
    left:0;
}

This dont work, but inline border-radius on center panel is working with
black border. I put border-color attribute but it dont work yet.

With Firefox 3.5 you can see the right behaviour, but dont with IE8.

What steps will reproduce the problem?
1. Create multiple items with curved-corner behavior attached 
2.
3.

What is the expected output? What do you see instead?
expected result: rounded corners on all elements
actual result: after about 20 elements (the number varies from computer to
comuter - as well as IE version) the .htc behavior causes IE to throw a
script error (code: 0)


What version of the product are you using? On what operating system?
version: v3
OS: 
Windows XP SP2 - IE 6
Windows Vista SP2 - IE8
Mac OS x 10.6 - Windows XP SP2 - IE 6 (Virtual) 


Please provide any additional information below.
I hate IE :(

I downloaded the border-radius-demo.zip and opened its HTML sample in IE8, and 
it dindn't work. It's a simple test, the own curved-corner's test. Why didn't 
it work?

IE seems to ignore background properties in css when using it, it shows the
image, but doesn't seem to listen to any repeat or positioning instructions.

Furthermore, for me, It does not seem to work in opera (who cares really),
but would be nice if possible.

Steps will reproduce the problem:
1. make a fieldset
2. apply curved corners to it
3. make a legend inside that fieldset

Expected output:
I expected rounded corners while legend does not move from it's original place 
in the top border.

Actual output:
Legend moves inside the fieldset and border becomes solid.


Please provide any additional information below.

I recommend adding this line of code to the htc file, which will clip the
border properly if the target is also clipped:

rect.style.clip = 'rect(' + this.currentStyle.clipTop + ' ' +
this.currentStyle.clipRight + ' ' + this.currentStyle.clipBottom + ' ' +
this.currentStyle.clipLeft + ')';

This allows very interesting possibilities, including having only 1 or 2
curved corners if you clip certain areas.


Regards,

Alex

What steps will reproduce the problem?
1. Just use the .htc file as normal
2. Run a program such as HTTPWatch to monitor requests

Makes a request to the following URL domain.com/none this then generated a
404 and the 404 page is downloaded in the background causing performance
issues with the entire page.

can please provide the latest code that deals with all ie versions

thanks
Sreeni

What steps will reproduce the problem?
1. The parent div has a background image.
2. As soon as the filter loads the background color vanishes.

What is the expected output? What do you see instead?
The rounded corner box should come above the image. Only the inner text is 
visible and not the background color with the rounded corners

What version of the product are you using? On what operating system?
I am using the latest version of the product and i am using Windows XP with IE8

Please provide any additional information below.
For a demo you can navigate to C:\Documents and 
Settings\SWF\Desktop\coupon-html\index.html, it works well in all other major 
browsers.

I am trying to use this with Joomla but it doesn't work. 

I added this ti template.css

.mytest {
background-color:#EFEFEF;
color:#000000;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
behavior: url(http://www.klikn.me/jtest/border-radius.htc);
}

Works well at Firefox, but in IE8 when page is loaded nothing from "mytest"
is there, not even background color. Background color is shown before page
loads (for 0,2 sec) but then it disappears when corners should curve. 

Ramiz toled me to use position:relative and z-index : 5 which I tried but
it has the same effect. Has anyone tried this with joomla and found out
what's causing that the css disappears?

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?
Fix

What version of the product are you using? On what operating system?
latest Version, Windows

Please provide any additional information below.
-moz-border-radius-topleft: 10px; 
-webkit-border-top-left-radius: 10px; 
border-top-left-radius: 10px; 
behavior: url(border-radius.htc); 

Now this won't work in IE

Hi Rahnas

This is Hansraj.I want to make a curved corner with css, border-radius but
it supports in FF, Opera, Safari, Chrome but does not worked in any version
of IE.

I have already used all the latest htc file provided by you and also do all
the work related with MIME in cpanel(Type-- text/x-component for-- htc
file) . I also make changes in Doctype but get the same result i.e. not get
Success.


So i need your help.

Plz reply me with the code on [email protected]

What steps will reproduce the problem?
1. Go to http://www.frenchsfor-p.schools.nsw.edu.au/ in IE7
2. Or use http://browsershots.org/ and submit address in step 1, for IE7
and IE 8 
3.

What is the expected output? What do you see instead?
In IE7 I see the rounded corners go 3px to the left and up 3 px

What version of the product are you using? On what operating system?
The november 2009 release, served from an IIS server

Please provide any additional information below.
Works brillaintly with IE8

To reproduce the problem:
1. Create an element in your HTML page
2. Style it to have a border radius declared in something other than pixels (px)


If ems/%s/pts were supported we we see nice round corners that look the same as 
rendered in modern browsers. Instead we see the corners have a different 
radius. (smaller than expected)


This could be quite easily fixed by checking what kind of unit was used 
declaring the radius and acting accordingly. For em/pt the simplest thing would 
be to multiply the size by 16 or 1.3333, respectively (Average conversion, 
assuming 96 dpi, not taking into account font-size and OS differences). For 
percentages this poses a whole new problem, since the code uses a VML 
roundrect, we can't create different radii for different corners. This can be 
achieved if support for single corners was added as implemented in the 
attachment to single Issue 22. In that case we could just get element 
height/width and calculate the percentages ourselves.

What steps will reproduce the problem?
1. include & use border-radius.htc in a page
2. include & use typeface.js on a page (http://typeface.neocracy.org/)
3. the element with border-radius disappears

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?
IE8, Windows XP, Typeface.js 0.14, border-radius.htc v3 from Nov 18

Please provide any additional information below.
Typeface.js uses VML to render, so the issue has probably something to do with 
that

Great work on this much needed fix!

I have just been playing around trying to see if I could add support for
the '-moz-border-radius-topleft' or 'top-left-radius' syntax but then I
notice is uses the rounded rectangle shape.

I don't have any knowledge of VML so I daren't risk editing anything I'm
afraid but it would be interesting to know.

Matt

What steps will reproduce the problem?
1. Access web page using border-radius.htc with IE8
2.
3.

What is the expected output? What do you see instead?
No messages in apache log

What version of the product are you using? On what operating system?
2009/11/18 from Nick Fetchak

Please provide any additional information below.
Something in the js code is resolving to "none" ?

Here is a patch to fix the problem:

I have a test file here:

http://ecoconsulting.co.uk/ie-border-radius/

where the ie-radius box vanishes altogether.

In another example (a copy of the page where I first tried it out) it works, 
but is shifted left:

http://ecoconsulting.co.uk/training/css_includes_ieradius.shtml

Both examples work fine in IE >= 7 without the ie-border-radius (correct 
position, no radius).

I know this isn't really for production, but if can be made to work...

Dave Everitt

What steps will reproduce the problem?
1. Viewing the newest Demo in IE8
2. Any OS

What is the expected output? What do you see instead?
You would expect to see a jpg of a cat in a background. In Gecko / Webkit
you see no background, and IE defaults to a black background.

What version of the product are you using? On what operating system?
I'm using the demo with the HTC Version 3.0 on Mac OSX (but I tested in XP
SP3).

Please provide any additional information below.


Hi,

Just found this great solution through word of mouth.

I downloaded the most recent demo (v3), and there is a couple issues in the
demo.

Specifically one being that there is some CSS errors in the demo:

Line 26 - In .box2 

background: transparent url(ashera.jpg); no-repeat top left;

Error #1 - The uploader didn't include "ashera.jpg". 
Error #2 - The syntax isn't correct, the semi-colon should be removed after
the url.
Error #3 - Using the "transparent" property is pointless when using a JPG,
and it should be switched to a 1px transparent PNG that's repeated.

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?
No hover image, but the button is working

What version of the product are you using? On what operating system?
On MAC OS X it works fine Firefox and Safari, but on Windows IE8 it doesn't.

Please provide any additional information below.

If there is an enclosing div which has a background color set, then that
color is used instead of the color of the div you want to round the corners of.

This can be trivially demonstrated by changing one line in the example file
from:
        <div class="rel">
 to:
    <div class="rel" style="background-color:#ffffff;">

I have had a look through the code, but can't identify the cause.

Also, I had an onmouseover and onmouseout event for the div, but they seem
to be being destroyed along the way too.

The test page works fine, so am assuming that there must be some