Не работает css на IE

@First · Регистрация: 09.06.2011

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Ребята подскажите не работает css на IE. Как исправить? Заранее очень благодарен.
Должно было быть: белые кружочки - мигающие, а выходят квадраты без анимации.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
   <style type="text/css">
        html, body {
            height: 100%;
            background-color: #1985D0;
        }
 
        #appLoadingIndicator {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            text-align: center;
            width: 100%;
            height: 30px;
            -webkit-animation-name: appLoadingIndicator;
            -webkit-animation-duration: 0.5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: linear;
        }
 
            #appLoadingIndicator > * {
                background-color: #FFFFFF;
                display: inline-block;
                height: 30px;
                -webkit-border-radius: 15px;
                margin: 0 5px;
                width: 30px;
                opacity: 0.8;
            }
 
        @-webkit-keyframes appLoadingIndicator {
            0% {
                opacity: 0.8;
            }
 
            50% {
                opacity: 0;
            }
 
            100% {
                opacity: 0.8;
            }
        }
    </style>
 
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

@Fedor92 · 19.05.2015, 22:23

First, стили чисто под ie 10+...

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
<title>Гостевая книга</title>
<meta charset="utf-8">
</head>
<style type="text/css">
        html, body {
            height: 100%;
            background-color: #1985D0;
        }
 
        #appLoadingIndicator {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            text-align: center;
            width: 100%;
            height: 30px;
            animation-name: appLoadingIndicator;
            animation-duration: 0.5s;
            animation-iteration-count: infinite;
            animation-direction: linear;
        }
 
            #appLoadingIndicator > * {
                background-color: #FFFFFF;
                display: inline-block;
                height: 30px;
                border-radius: 15px;
                margin: 0 5px;
                width: 30px;
                opacity: 0.8;
            }
 
        @-ms-keyframes appLoadingIndicator {
            0% {
                opacity: 0.8;
            }
 
            50% {
                opacity: 0;
            }
 
            100% {
                opacity: 0.8;
            }
        }
    </style>
 
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</body>
</html>

@First · 22.05.2015, 06:31 **[ТС]**

А как с таким справиться нечего не понимаю... бьюсь уже валом времени... Может есть где смотреть сравнение какое где в каком браузкре работает или нет...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
.x-pathmenu {
  width: 100%;
  height: 100%;
  background: #000000;
}
 
 
.x-pathmenu-body {
  position: relative;
  width: 42px;
  height: 42px;
}
 
.x-pathmenu-body .x-button {
  position: absolute;
  overflow: visible;
  padding: 4px;
  margin: 20px;
  left: 2px;
  border: none;
  -webkit-box-shadow: 0 0 0 3px white, 0 0 0 4px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 0 3px white, 0 0 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px white, 0 0 0 4px rgba(0, 0, 0, 0.3);
}
 
.x-pathmenu-body .x-button:before, .x-pathmenu-body .x-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}
 
.x-pathmenu-body .x-button:before {
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
 
.x-pathmenu-body .x-button.x-button-pressing:after {
  background: #000;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
 
.x-pathmenu-body .x-button-normal {
  width: 26px;
  height: 26px;
  min-height: 26px;
  bottom: 8px;
  left: 8px;
  background: #44403d;
  z-index: 1;
  -webkit-border-radius: 26px;
  -moz-border-radius: 26px;
  -ms-border-radius: 26px;
  -o-border-radius: 26px;
  border-radius: 26px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
 
.x-pathmenu-body .x-button-normal:before, .x-pathmenu-body .x-button-normal:after {
  width: 34px;
  height: 34px;
  margin-top: -17px;
  margin-left: -17px;
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
  border-radius: 34px;
}
 
.x-pathmenu-body .x-button-normal .x-button-icon {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}
 
 
.x-button-path {
  width: 34px;
  height: 34px;
  bottom: 4px;
  left: 4px;
  z-index: 2;
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
  border-radius: 34px;
}
 
.x-button-path, .x-button-path.x-button-pressing, .x-button-path.x-button-pressed {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e85839), color-stop(49%, #e24428), color-stop(51%, #dd3018), color-stop(100%, #cb2c16));
  background-image: -webkit-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: -moz-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: -o-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: -ms-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
}
 
.x-button-path:before, .x-button-path:after {
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  -ms-border-radius: 42px;
  -o-border-radius: 42px;
  border-radius: 42px;
}
 
.x-button-path.x-button-pressed .x-button-label {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
 
.x-button-path.x-button-pressed:before, .x-button-path.x-button-pressed:after {
  background-color: transparent;
  background-image: none;
}
 
.x-button-path .x-button-label {
  font-family: Dosis, sans-serif;
  font-weight: 600;
  line-height: 22px;
  font-size: 49px;
  height: 100%;
  width: 100%;
  color: #FFF;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

а если точнее не работает анимация оО
Буду очень признателен любой подсказке.

@Fedor92 · 22.05.2015, 11:00

First, сайт где можно проверить какие css - свойства в каких броузерах поддерживаются... В частности префикс -ms- для ie; -o- для Opera; -moz- для Mozilla Firefox; -webkit- для Safari и Google Chrome; -khtml- для Unix - систем; -icab- для броузера icab... Помимо css выложите html, чтобы можно было потестировать...

@First · 22.05.2015, 11:33 **[ТС]**

Пишу "программульку" для WP 8.1, хочу сделать меню. Но не получается - меню не раскрывается

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
Ext.define('MyApp.view.mainForm', {
    extend: 'Ext.Container',
    xtype: 'mainMenuForm',
    config: {
        cls: Ext.baseCSSPrefix + 'pathmenu',
        layout: {
            type: 'vbox',
            align: 'start',
            pack: 'end'
        },
        items: [{
            xtype: 'container',
            cls: Ext.baseCSSPrefix + 'pathmenu-body',
            defaultType: 'button',
            items: [{
                ui: 'path',
                itemId: 'main-button',
                text: '+'
            }, {
                iconCls: 'ico-photo'
            }, {
                iconCls: 'ico-profile'
            }, {
                iconCls: 'ico-location'
            }, {
                iconCls: 'ico-music'
            }, {
                iconCls: 'ico-message'
            }, {
                iconCls: 'ico-sleep'
            }]
        }]
    },
 
    initialize: function () {
        var me = this,
            btnPath = me.down('button[ui=path]');
 
        btnPath.on('tap', me.onPathBtnTap, me);
        me.callParent(arguments);
    },
 
    onPathBtnTap: function (btn) {
        var pressedCls = Ext.baseCSSPrefix + 'button-pressed';
 
        btn.pressed = !btn.pressed;
 
        if (btn.pressed) {
            btn.addCls(pressedCls);
            this.fanOut();
        }
        else {
            btn.removeCls(pressedCls);
            this.fanIn();
        }
    },
 
    fanOut: function () {
        this.getComponent(0).items.each(this.fanOutItem, this);
    },
 
    fanIn: function () {
        this.getComponent(0).items.each(this.fanInItem, this);
    },
 
    //@private
    fanOutItem: function (item, index, len) {
        var angle, rad, sin, cos, x, y, style, difCenter,
            arc = 90,
            distance = 150;
 
        //ignore main button
        if (index === 0) {
            return;
        }
        index--;
        len--;
 
        //calculate angle using items count
        if (len === 1) {
            angle = 0;
        }
        else {
            angle = (arc / (len - 1)) * index;
        }
 
        //transform angle to rad
        rad = angle * Math.PI / 180;
 
        //calculate cos and sin
        cos = Math.cos(rad);
        sin = Math.sin(rad);
 
        //find x,y using distance
        x = Math.ceil(distance * cos);
        y = Math.ceil(distance * sin * -1);
 
        style = {
            '-webkit-transition-delay': (30 * index) + 'ms',
            '-webkit-transform': 'translate3d(' + x + 'px, ' + y + 'px, 0)'
        };
 
        if (!item.rendered) {
            item.style = style;
        }
        else {
            item.element.applyStyles(style);
        }
    },
 
    //@private
    fanInItem: function (item, index, len) {
        //ignore main button
        if (index === 0) {
            return;
        }
 
        var style = {
            '-webkit-transition-delay': (30 * index) + 'ms',
            '-webkit-transform': 'translate3d(0px, 0px, 0)'
        };
 
        if (!item.rendered) {
            item.style = style;
        }
        else {
            item.element.applyStyles(style);
        }
    }
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
.x-pathmenu {
  width: 100%;
  height: 100%;
  background: #000000;
}
 
 
.x-pathmenu-body {
  position: relative;
  width: 42px;
  height: 42px;
}
 
.x-pathmenu-body .x-button {
  position: absolute;
  overflow: visible;
  padding: 0;
  border: none;
  -webkit-box-shadow: 0 0 0 3px white, 0 0 0 4px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 0 3px white, 0 0 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px white, 0 0 0 4px rgba(0, 0, 0, 0.3);
}
 
.x-pathmenu-body .x-button:before, .x-pathmenu-body .x-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}
 
.x-pathmenu-body .x-button:before {
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
 
.x-pathmenu-body .x-button.x-button-pressing:after {
  background: #000;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
 
.x-pathmenu-body .x-button-normal {
  width: 26px;
  height: 26px;
  min-height: 26px;
  bottom: 8px;
  left: 8px;
  background: #44403d;
  z-index: 1;
  -webkit-border-radius: 26px;
  -moz-border-radius: 26px;
  -ms-border-radius: 26px;
  -o-border-radius: 26px;
  border-radius: 26px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
 
.x-pathmenu-body .x-button-normal:before, .x-pathmenu-body .x-button-normal:after {
  width: 34px;
  height: 34px;
  margin-top: -17px;
  margin-left: -17px;
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
  border-radius: 34px;
}
 
.x-pathmenu-body .x-button-normal .x-button-icon {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}
 
 
.x-button-path {
  width: 34px;
  height: 34px;
  bottom: 4px;
  left: 4px;
  z-index: 2;
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
  border-radius: 34px;
}
 
.x-button-path, .x-button-path.x-button-pressing, .x-button-path.x-button-pressed {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e85839), color-stop(49%, #e24428), color-stop(51%, #dd3018), color-stop(100%, #cb2c16));
  background-image: -webkit-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: -moz-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: -o-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: -ms-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
}
 
.x-button-path:before, .x-button-path:after {
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  -ms-border-radius: 42px;
  -o-border-radius: 42px;
  border-radius: 42px;
}
 
.x-button-path.x-button-pressed .x-button-label {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
 
.x-button-path.x-button-pressed:before, .x-button-path.x-button-pressed:after {
  background-color: transparent;
  background-image: none;
}
 
.x-button-path .x-button-label {
  font-family: Dosis, sans-serif;
  font-weight: 600;
  line-height: 22px;
  font-size: 49px;
  height: 100%;
  width: 100%;
  color: #FFF;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MyApp</title>
    <script id="microloader" type="text/javascript" src="/touch/microloader/development.js"></script>
    <!----------------------------------PathMenu------------------------------------>
    <link rel="stylesheet" href="/pathMenu/Icons.css" />
    <link rel="stylesheet" href="/pathMenu/PathMenu.css" />
    <!------------------------------------------------------------------------------>
    <link href="/css/myStyle.css" rel="stylesheet">
    <style type="text/css">
        html, body {
            height: 100%;
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div id="appLoadingIndicator">
        <div>
            <img src="/img/galochka.png" alt="Mountain View" style="width:40px;height:40px">
        </div>
        <div>
            <img src="/img/galochka.png" alt="Mountain View" style="width:40px;height:40px">
        </div>
        <div>
            <img src="/img/galochka.png" alt="Mountain View" style="width:40px;height:40px">
        </div>
    </div>
</body>
</html>

@First · 22.05.2015, 11:33 **[ТС]**

Пишу "программульку" для WP 8.1, хочу сделать меню. Но не получается - меню не раскрывается

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
Ext.define('MyApp.view.mainForm', {
    extend: 'Ext.Container',
    xtype: 'mainMenuForm',
    config: {
        cls: Ext.baseCSSPrefix + 'pathmenu',
        layout: {
            type: 'vbox',
            align: 'start',
            pack: 'end'
        },
        items: [{
            xtype: 'container',
            cls: Ext.baseCSSPrefix + 'pathmenu-body',
            defaultType: 'button',
            items: [{
                ui: 'path',
                itemId: 'main-button',
                text: '+'
            }, {
                iconCls: 'ico-photo'
            }, {
                iconCls: 'ico-profile'
            }, {
                iconCls: 'ico-location'
            }, {
                iconCls: 'ico-music'
            }, {
                iconCls: 'ico-message'
            }, {
                iconCls: 'ico-sleep'
            }]
        }]
    },
 
    initialize: function () {
        var me = this,
            btnPath = me.down('button[ui=path]');
 
        btnPath.on('tap', me.onPathBtnTap, me);
        me.callParent(arguments);
    },
 
    onPathBtnTap: function (btn) {
        var pressedCls = Ext.baseCSSPrefix + 'button-pressed';
 
        btn.pressed = !btn.pressed;
 
        if (btn.pressed) {
            btn.addCls(pressedCls);
            this.fanOut();
        }
        else {
            btn.removeCls(pressedCls);
            this.fanIn();
        }
    },
 
    fanOut: function () {
        this.getComponent(0).items.each(this.fanOutItem, this);
    },
 
    fanIn: function () {
        this.getComponent(0).items.each(this.fanInItem, this);
    },
 
    //@private
    fanOutItem: function (item, index, len) {
        var angle, rad, sin, cos, x, y, style, difCenter,
            arc = 90,
            distance = 150;
 
        //ignore main button
        if (index === 0) {
            return;
        }
        index--;
        len--;
 
        //calculate angle using items count
        if (len === 1) {
            angle = 0;
        }
        else {
            angle = (arc / (len - 1)) * index;
        }
 
        //transform angle to rad
        rad = angle * Math.PI / 180;
 
        //calculate cos and sin
        cos = Math.cos(rad);
        sin = Math.sin(rad);
 
        //find x,y using distance
        x = Math.ceil(distance * cos);
        y = Math.ceil(distance * sin * -1);
 
        style = {
            '-webkit-transition-delay': (30 * index) + 'ms',
            '-webkit-transform': 'translate3d(' + x + 'px, ' + y + 'px, 0)'
        };
 
        if (!item.rendered) {
            item.style = style;
        }
        else {
            item.element.applyStyles(style);
        }
    },
 
    //@private
    fanInItem: function (item, index, len) {
        //ignore main button
        if (index === 0) {
            return;
        }
 
        var style = {
            '-webkit-transition-delay': (30 * index) + 'ms',
            '-webkit-transform': 'translate3d(0px, 0px, 0)'
        };
 
        if (!item.rendered) {
            item.style = style;
        }
        else {
            item.element.applyStyles(style);
        }
    }
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
.x-pathmenu {
  width: 100%;
  height: 100%;
  background: #000000;
}
 
 
.x-pathmenu-body {
  position: relative;
  width: 42px;
  height: 42px;
}
 
.x-pathmenu-body .x-button {
  position: absolute;
  overflow: visible;
  padding: 0;
  border: none;
  -webkit-box-shadow: 0 0 0 3px white, 0 0 0 4px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 0 3px white, 0 0 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px white, 0 0 0 4px rgba(0, 0, 0, 0.3);
}
 
.x-pathmenu-body .x-button:before, .x-pathmenu-body .x-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}
 
.x-pathmenu-body .x-button:before {
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
 
.x-pathmenu-body .x-button.x-button-pressing:after {
  background: #000;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
 
.x-pathmenu-body .x-button-normal {
  width: 26px;
  height: 26px;
  min-height: 26px;
  bottom: 8px;
  left: 8px;
  background: #44403d;
  z-index: 1;
  -webkit-border-radius: 26px;
  -moz-border-radius: 26px;
  -ms-border-radius: 26px;
  -o-border-radius: 26px;
  border-radius: 26px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
 
.x-pathmenu-body .x-button-normal:before, .x-pathmenu-body .x-button-normal:after {
  width: 34px;
  height: 34px;
  margin-top: -17px;
  margin-left: -17px;
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
  border-radius: 34px;
}
 
.x-pathmenu-body .x-button-normal .x-button-icon {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}
 
 
.x-button-path {
  width: 34px;
  height: 34px;
  bottom: 4px;
  left: 4px;
  z-index: 2;
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
  border-radius: 34px;
}
 
.x-button-path, .x-button-path.x-button-pressing, .x-button-path.x-button-pressed {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e85839), color-stop(49%, #e24428), color-stop(51%, #dd3018), color-stop(100%, #cb2c16));
  background-image: -webkit-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: -moz-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: -o-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: -ms-linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
  background-image: linear-gradient(#e85839, #e24428 49%, #dd3018 51%, #cb2c16);
}
 
.x-button-path:before, .x-button-path:after {
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  -ms-border-radius: 42px;
  -o-border-radius: 42px;
  border-radius: 42px;
}
 
.x-button-path.x-button-pressed .x-button-label {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
 
.x-button-path.x-button-pressed:before, .x-button-path.x-button-pressed:after {
  background-color: transparent;
  background-image: none;
}
 
.x-button-path .x-button-label {
  font-family: Dosis, sans-serif;
  font-weight: 600;
  line-height: 22px;
  font-size: 49px;
  height: 100%;
  width: 100%;
  color: #FFF;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MyApp</title>
    <script id="microloader" type="text/javascript" src="/touch/microloader/development.js"></script>
    <!----------------------------------PathMenu------------------------------------>
    <link rel="stylesheet" href="/pathMenu/Icons.css" />
    <link rel="stylesheet" href="/pathMenu/PathMenu.css" />
    <!------------------------------------------------------------------------------>
    <link href="/css/myStyle.css" rel="stylesheet">
    <style type="text/css">
        html, body {
            height: 100%;
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div id="appLoadingIndicator">
        <div>
            <img src="/img/galochka.png" alt="Mountain View" style="width:40px;height:40px">
        </div>
        <div>
            <img src="/img/galochka.png" alt="Mountain View" style="width:40px;height:40px">
        </div>
        <div>
            <img src="/img/galochka.png" alt="Mountain View" style="width:40px;height:40px">
        </div>
    </div>
</body>
</html>

@Fedor92 · 22.05.2015, 11:54

First, У Вас проблема скорее в js... С html и css всё вроде норм... Возникло несколько вопросов... Первый должна ли подключаться библиотека jquery? Второй на что направлен js - эффект? Сделать что-то вроде аккордеона или просто анимация при появлении? Если это анимация при появлении, то вопрос переадресовываете на ветку js... Если аккордеон, то есть вопрос по html: а где же подменю?

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	22.05.2015, 11:00
	First, сайт где можно проверить какие css - свойства в каких броузерах поддерживаются... В частности префикс -ms- для ie; -o- для Opera; -moz- для Mozilla Firefox; -webkit- для Safari и Google Chrome; -khtml- для Unix - систем; -icab- для броузера icab... Помимо css выложите html, чтобы можно было потестировать... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	22.05.2015, 11:54
	First, У Вас проблема скорее в js... С html и css всё вроде норм... Возникло несколько вопросов... Первый должна ли подключаться библиотека jquery? Второй на что направлен js - эффект? Сделать что-то вроде аккордеона или просто анимация при появлении? Если это анимация при появлении, то вопрос переадресовываете на ветку js... Если аккордеон, то есть вопрос по html: а где же подменю? 0

Не работает css на IE

Решение