Rounded corners are not rounded in IE

Question

Any clue? Tried pie.htc but it is not working

.vjs-default-skin .vjs-big-play-button {
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  behavior: url(bla bla/PIE.htc);
  position: relative;
}

enter image description here

BTW, it doesn't work either on the official website http://videojs.com/ :-/ — Michel, Feb 27 '13 at 11:56

score 0 · Answer 1 · edited May 23 '17 at 10:30

0

It may help to tell the browser that it is expecting IE9+ code like so:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

(See Support for "border-radius" in IE)

edited May 23 '17 at 10:30

Community

1
1

answered Feb 21 '13 at 15:08

AndyJW

191
8

Have you tried my solution? I'm currently using it on my site and it works like a charm. There are also multiple other solutions to this on here that just aren't directly linked to video-js. http://stackoverflow.com/q/6130235/728053, http://stackoverflow.com/q/4692686/728053 You could try some of those solutions if you're not a fan of mine. – Vagari Mar 16 '13 at 02:38

score 0 · Answer 2 · answered Feb 21 '13 at 23:39

0

I've experienced problems with CSS3Pie quite a bit. Read the Known Issues page for the full explanations, but the problem I usually have is either with the relative paths or not having the appropriate content-type for .htc in your htaccess file.

answered Feb 21 '13 at 23:39

Syren

1,961
2
15
19

score 0 · Answer 3 · answered Feb 25 '13 at 08:26

0

I think you have problem in link to your ".htc" file. I had same problem and solved it with correct link to PIE.htc (I use PIE.php because this is better for me - this file include PIE.htc and I have not problem with .htaccess file). If your rounded corners works in Firefox (for example) and not work IE8 and older then you must have problem in link on PIE file. You must make link to htc file from file where you used rounded corners (not from CSS file but from, for example, home.php).

But without code, test page or something similar is problem to test it and say "you have problem right here".

answered Feb 25 '13 at 08:26

Severe Torture

319
5
26

if i put the full url (http://localhost..../.../pie.htc), it should work, shouldn't it? – Michel Feb 25 '13 at 12:10
Nothing Localhost you are using this on web not only on localhost I think. I describe my situation and tree of files and folders: funkce(folder), css (folder), img (folder), slash_home.php (file) - everything is in same folder with name of project. PIE.php (file - or PIE.htc if you don´t use better ".php") I have inside folder "funkce" and I use PIE in slash_home. Therefor I use "behavior: url(funkce/PIE.php);" because from file slash_home.php I must enter to folder "funkce" and here get file PIE.php. – Severe Torture Feb 26 '13 at 13:12
"behavior: url(funkce/PIE.php);" is working on localhost and still on web if you have same file tree. With localhost you have only absolute link which works only on localhost but on web is not working. – Severe Torture Feb 26 '13 at 13:18
well I know localhost would only work on local and not on the web... i'm trying to get it working locally first then i'll try relative paths. – Michel Feb 27 '13 at 07:20
In my web "behavior: url(funkce/PIE.php);" works in localhost and in web too. On localhost you must have correct link as on web. In FF etc.. PIE works? If yes then you have error in path to PIE file. Try my style of path to PIE file (= from your for example html file ,where you used PIE, to PIE file). – Severe Torture Feb 27 '13 at 07:41

score 0 · Answer 4 · answered Mar 08 '13 at 19:56

What you're seeing is an issue with IE 9, gradient backgrounds, and CSS3 borders. In version 3.2.0, at line 329 of the default styles you'll find the reference for Big Play Button (at start). IE 9 is grabbing on to the filter declaration.

background: #454545;
background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);

If you add an SVG image gradient and use a conditional comment to get rid of the filter you can get rounded borders and a gradient background. Something like Colorzilla's Gradient Generator can help.

CSS:

background: #454545; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIzMjMyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzE2MTYxNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjNmM2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #454545 0%, #232323 50%, #161616 51%, #3f3f3f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(51%,#161616), color-stop(100%,#3f3f3f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* IE10+ */
background: linear-gradient(to bottom,  #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-8 */

Somewhere in your HTML:

<!--[if gte IE 9]>
<style type="text/css">
.vjs-default-skin .vjs-big-play-button {
    filter: none;
}
</style>
<![endif]-->

Hope that helps.

score 0 · Answer 5 · answered Mar 18 '13 at 01:56

0

try declaring this in the css file,

overflow:hidden

answered Mar 18 '13 at 01:56

Chris

1

Rounded corners are not rounded in IE

5 Answers5