css3 pie not working on dynamic css change

Question

I'm using css3 PIE in order to create circle through border-radius(in IE8). It is working fine normally. but when i'm trying to change the background color of circle, that element is turning into square. my code looks like this.

    .menuIco {
        width:16px;
        height:16px;
        border-radius:8px;
        position:relative;
        z-index:101;
        background-color:#38B6E7;
    }

    .active .menuIco {
        background-color:#F1F1F1;
    }

my html looks like this..

    <div> <!-- i am adding .active class to this div using jquery -->
        <div class="menuIco"> </div>
    </div>

when i add active class to parent div(using Jquery dynamically) the menuIco (circle) should change its color. But the border-radius property is collapsing.

can anyone help me how to fix this! Thanks in advance.

Have you tried using the htc instead of the js?

Mr AH
– Mr AH

2014-11-21 11:31:54 +00:00
Commented Nov 21, 2014 at 11:31 — Mr AH
– Mr AH, Commented Nov 21, 2014 at 11:31
nope! im using js only

bharat
– bharat

2014-11-21 15:00:38 +00:00
Commented Nov 21, 2014 at 15:00 — bharat
– bharat, Commented Nov 21, 2014 at 15:00

jbutler483 · Accepted Answer · 2014-11-20 13:23:43Z

0

Set your border-radius to 100%.

Here's a LIVE DEMO for you to see.

 .menuIco {
        width:100px;
        height:100px;
        border-radius:100%;
        position:relative;
        z-index:101;
        background-color:#38B6E7;
    }

I have made the width and height to 100px so as to show it on a larger scale. (this can be resized as necessary)

EDIT

Depending on your browser, you should look to include the other prefixes, is shown in this fiddle

the border radius is defined by:

    -webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;

edited Nov 20, 2014 at 13:23

answered Nov 20, 2014 at 13:11

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bharat Over a year ago

thanks for answering. but it's not working.. i'm adding that active class dynamically using jquery. after adding the border-radius is collapsing!!

jbutler483 Over a year ago

Could you possibly provide a jsfiddle for me? As i'm not quite sure as to why this is failing, apart from not including other prefixes for multi-browser support (shown in edit).

bharat Over a year ago

jsfiddle doesnt works in IE8!! so how can i show u demo?? border-radius is collapsing in IE8 , in other browsers it is working fine!!

jbutler483 Over a year ago

Please refer to this article which supports IE7/8

bharat Over a year ago

FYI, i am implementing in the same methos. but when i am changing the css dynamically after loading the page in IE8 it is collapsing!!! it is behaving differently... i think the problem is with PIE.js it is not triggering after dynamic css change i guess. i think you didnt understand the problem clearly.

Collectives™ on Stack Overflow

css3 pie not working on dynamic css change

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related