Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
1

Кривое отображение блока в FireFox

03.10.2014, 20:46. Показов 1389. Ответов 8
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Везде нормально, а в FireFox опять не на своем месте элемент select. Кнопки разного размера. Такой ерунды даже в Internet Explorer не наблюдается. Что можно с этим сделать?
Название: 111123jpg_4242887_14101041.jpg Просмотров: 4 Размер: 2.2 Кб
Название: 11112jpg_7253547_14101090.jpg Просмотров: 4 Размер: 2.2 Кб
Кстати при валидации страницы выдает ошибку: The first child option element of a select element with a required attribute and without a multiple attribute, and whose size is 1, must have either an empty value attribute, or must have no text content. [HTML5]

Это в том месте где улетает вниз элемент select

Вот код на который ругается валидатор:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

          <div id="field14-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
               <label for="field14">
                    Тип котеджа
               </label>
               <select name="field14" id="field14" required="required">
                    <option id="field14-1" value="Семейный">
                         Семейный
                    </option>
                    <option id="field14-2" value="VIP">
                         VIP
                    </option>
                    <option id="field14-3" value="Корпоративный">
                         Корпоративный
                    </option>
               </select>
          </div>
Делаю страницу на спецификации html5
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 03.10.2014, 20:46
Ответы с готовыми решениями:

Кривое отображение таблицы в Firefox
Сверстал таблицу на сайт, во всех браузерах открывает корректно (даже в IE 6,7), a в Mozila FireFox...

Кривое отображение в IE
День добрый как сделать чтобы эти блоки отображались ровно в IE в других браузерах они хорошо...

кривое отображение
у меня есть динамичный сайт, в верху панель с кнопками, мне надо, чтобы пару кнопок передвигались...

Кривое отображение на Mac
Верстаю сайт с другом на пару. У друга Мак, просматривает вёрстку и говорит - у меня меню верхнее...

8
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
03.10.2014, 21:24 2
А где код?
Возможно (и даже скорее всего) дело не в css, а в ява-скрипте - т.е. Вам вообще в другой раздел.

Добавлено через 3 минуты
Не, тут не в валидации дело. Ну напишите так, как требует валидатор:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<select name="field14" id="field14" required="required">
                    <option id="field14-0" value="">
                         Выберите тип
                    </option>
                   <option id="field14-1" value="Семейный">
                         Семейный
                    </option>
                    <option id="field14-2" value="VIP">
                         VIP
                    </option>
                    <option id="field14-3" value="Корпоративный">
                         Корпоративный
                    </option>
               </select>
Но это проблему не решит.
2
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
04.10.2014, 13:12  [ТС] 3
Кстати я заметил что если этот блок выкидывать из модального окна (в нем он располагается), то все становится нормально. Может на самом деле проблема в js?

Вот код скрипта модального окна:

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

/**
 * modalEffects.js v1.0.0
 * [url]http://www.codrops.com[/url]
 *
 * Licensed under the MIT license.
 * [url]http://www.opensource.org/licenses/mit-license.php[/url]
 * 
 * Copyright 2013, Codrops
 * [url]http://www.codrops.com[/url]
 */
var ModalEffects = (function() {
 
    function init() {
 
        var overlay = document.querySelector( '.md-overlay' );
 
        [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
 
            var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
                close = modal.querySelector( '.md-close' );
 
            function removeModal( hasPerspective ) {
                classie.remove( modal, 'md-show' );
 
                if( hasPerspective ) {
                    classie.remove( document.documentElement, 'md-perspective' );
                }
            }
 
            function removeModalHandler() {
                removeModal( classie.has( el, 'md-setperspective' ) ); 
            }
 
            el.addEventListener( 'click', function( ev ) {
                classie.add( modal, 'md-show' );
                overlay.removeEventListener( 'click', removeModalHandler );
                overlay.addEventListener( 'click', removeModalHandler );
 
                if( classie.has( el, 'md-setperspective' ) ) {
                    setTimeout( function() {
                        classie.add( document.documentElement, 'md-perspective' );
                    }, 25 );
                }
            });
 
            close.addEventListener( 'click', function( ev ) {
                ev.stopPropagation();
                removeModalHandler();
            });
 
        } );
 
    }
 
    init();
 
})();
Добавлено через 1 минуту
ludmila-sv, я не очень хорошо разбираюсь в html, исправить ошибку валидации не получается.

Добавлено через 2 минуты
В основных браузерах проблем вообще нет. Даже IE нормально воспроизводит элемент. Бред происходит только в firefox (у меня вообще часто конфликт именно с firefox а не с IE)
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
04.10.2014, 15:13 4
Того, что Вы выкладываете, недостаточно, чтобы понять, что происходит.
html: нужен не отдельный элемент select, нужно посмотреть, как он располагается относительно других элементов. Для этого и css понадобится.
js: в том, что Вы выложили, я криминала не вижу, но это, видимо, не весь код - где определяется classie?

Цитата Сообщение от Код - Альфа Посмотреть сообщение
исправить ошибку валидации не получается.
На валидацию предлагаю пока наплевать, дело не в ней.
1
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
04.10.2014, 17:20  [ТС] 5
Вот код модального окна в странице, и самой формы в модальном окне:
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

        <div class="md-modal md-effect-10" id="modal-10">
            <div class="md-content">
                <h3>Бронирование</h3>
                <div>
                    <p>Заполните пожалуйста все данные формы</p>
<div class="TTWForm-content111">
<div class="TTWForm-container">
     
     
     <form action="process_form.php" class="TTWForm ui-sortable-disabled" method="post"
     novalidate="">
          
          
          <div id="field2-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
               <label for="field2">
                    Ваше имя
               </label>
               <input type="text" name="field2" id="field2" required>
          </div>
          
          
          <div id="field9-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
               <label for="field9">
                    Телефон
               </label>
               <input type="text" name="field9" id="field9" required>
          </div>
          
          
          <div id="field10-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
               <label for="field10">
                    Email
               </label>
               <input type="email" name="field10" id="field10" required>
          </div>
          
          
          <div id="field14-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
               <label for="field14">
                    Тип котеджа
               </label>
               <select name="field14" id="field14" required="required">
                    <option id="field14-1" value="Семейный">
                         Семейный
                    </option>
                    <option id="field14-2" value="VIP">
                         VIP
                    </option>
                    <option id="field14-3" value="Корпоративный">
                         Корпоративный
                    </option>
               </select>
          </div>
          
          
          <div id="field6-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
               <label for="field6">
                    Дата заезда
               </label>
               <input class="ttw-date date" id="field6" maxlength="524288" name="field6"
               required="" size="20" tabindex="0" title="">
          </div>
          
          
          <div id="field11-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
               <label for="field11">
                    Дата выезда
               </label>
               <input class="ttw-date date" id="field11" maxlength="524288" name="field11"
               required="" size="20" tabindex="0" title="">
          </div>
          
          
          <div id="field16-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
               <label for="field16">
                    Количество человек
               </label>
               <input type="text" name="field16" id="field16" required>
          </div>
          
          
          <div id="field1-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
               <label for="field1">
                    Комментарии (не обязательно)
               </label>
               <textarea rows="5" cols="20" name="field1" id="field1"></textarea>
          </div>
          
          
          <div id="form-submit" class="field f_100 clearfix submit">
               <input type="submit" value="Отправить">
 
 <a class="button_close md-close">закрыть</a>
          </div>
     </form>
</div> 
 
                    </div>
                </div>
            </div>
        </div>
0
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
04.10.2014, 17:24  [ТС] 6
А это css модального окна:

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231

.TTWForm-content111 {
 
min-height:200px;
max-height:500px;
    width:560px;
    margin:0 0 40px 0;
 
    }
 
@media screen and (max-height: 1080px) {
.TTWForm-content111 {
height:500px;
}
}
@media screen and (max-height:700px) {
.TTWForm-content111 {
height:400px;
}
 
}
@media screen and (max-height:600px) {
.TTWForm-content111 {
height:300px;
}
}
 
.md-perspective,
.md-perspective {
    height: 100%;
    overflow: hidden;
}
 
.md-perspective  {
    background: #222;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}
 
.container {
    background: #e74c3c;
    height: 100%;
    
}
 
.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
 
    width: 630px;
 
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
 
.md-show {
    visibility: visible;
}
 
.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background-color:#000;
    background-color: rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
 
.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}
 
/* Content styles */
.md-content {
    color: #fff;
    background: #282828;
    position: relative;
    border-radius: 3px;
    margin: 0 auto;
    min-height:250px;
    max-height:700px;
}
 
.md-content h3 {
    margin: 0;
    padding: 0;
    text-align: center;
    font: 54px 'aa-bebasneue', arial, Verdana, sans-serif;
    background: #e9eb4b;
    border-radius: 3px 3px 0 0;
}
 
.md-content > div {
    padding: 15px 40px 30px;
    margin: 0;
    font-weight: 300;
    font-size: 11px;
}
 
.md-content > div p {
    margin: 0;
    padding: 10px 0;
}
 
.md-content > div ul {
    margin: 0;
    padding: 0 0 30px 20px;
}
 
.md-content > div ul li {
    padding: 5px 0;
}
 
.md-content button {
    display: block;
    margin: 0 auto;
    font-size: 0.8em;
}
 
/* Individual modal styles with animations/transitions */
 
/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
 
.md-show.md-effect-1 .md-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
 
 
 
/* Effect 10: 3D sign */
.md-effect-10.md-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
    
}
 
 
 
.md-effect-10 .md-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-60deg);
    -moz-transform: rotateX(-60deg);
    -ms-transform: rotateX(-60deg);
    transform: rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
 
.md-show.md-effect-10 .md-content {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
}
 
 
 
 
/* Effect 16:  Blur */
.md-show.md-effect-16 ~ .md-overlay {
    background: rgba(180,46,32,0.5);
}
 
.md-show.md-effect-16 ~ .container {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    filter: blur(3px);
}
 
.md-effect-16 .md-content {
    -webkit-transform: translateY(-5%);
    -moz-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    transform: translateY(-5%);
    opacity: 0;
}
 
.md-show.md-effect-16 ~ .container,
.md-effect-16 .md-content {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
 
.md-show.md-effect-16 .md-content {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
СSS формы:
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224

/**
 * Created with Visual Form Builder by 23rd and Walnut
 * [url]www.visualformbuilder.com[/url]
 * [url]www.23andwalnut.com[/url]
 */
 
/** Basic Styling **/
 
 
 
.TTWForm{
    width: 500px;
}
 
 
 
.TTWForm-container {
    font-size: 12px;
    color: #DBDBDB;
    background: transparent;
    font-family: "Boblic", Arial, Helvetica, sans-serif;
}
 
 
.TTWForm-wrapper.wrapped{
    padding: 30px 30px 30px 30px;
    border: 1px solid #ced4d7;
    box-shadow: inset 0 0 0 5px #eef5f7, 0 0 3px rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0 0 0 5px #eef5f7, 0 0 3px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 0 5px #eef5f7, 0 0 3px rgba(0, 0, 0, .1);
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
 
.TTWForm-container h2 {
    font-size: 2em;
    margin-bottom: 0.75em;
    color: #65777c;
    font-weight: normal;
}
 
 
/** Field Styles **/
.TTWForm .field, #form-title.field {
    padding-bottom: 12px;
    padding-top: 12px;
    position: relative;
    clear: both;
}
 
.TTWForm .field:first-child{
    padding-top:0;
}
 
.TTWForm .field:last-child{
    padding-bottom:0;}
 
 
 
/** Field Widths */
.f_25 {
    width: 21%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
 
.f_50 {
    width: 46%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
 
.f_75 {
    width: 71%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
 
.f_100 {
    width: 96%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
 
 
.TTWForm input, .TTWForm textarea, .TTWForm select, div.selector, div.uploader  {
    width: 100%;
    font: 14px "Boblic", Helvetica, Verdana, sans-serif;
    padding: 6px 0 6px 6px;
    color: #B5B5B5;
    border: 1px solid #595959;
    outline: none;
    display: inline-block;
    position: relative;
 
    z-index: 2;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    background: none;
}
 
 
.TTWForm input[type=radio], .TTWForm input[type=checkbox] {
    width: 12px;
    margin: 8px 12px;
    top: 3px;
    position: relative;
}
 
.TTWForm .option{
    margin:6px 0;
}
 
.TTWForm .option-title{
    position:relative;
    top:2px;
    color: #798e94;
}
 
 
.TTWForm textarea {
    overflow: hidden;
}
 
.TTWForm label {
    color: #747474;
    text-align: left;
    font: 14px "Boblic", Helvetica, Verdana, sans-serif;
    margin-bottom: 5px;
    display: inline-block;
}
 
.TTWForm .submit input, .button_close  {
    font: 21px aa-bebasneue, Arial, Helvetica;
    text-align: center;
 
    text-decoration: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    display: block;
    margin: 12px -2px 12px 0;
    text-align: center;
    float: right;
    padding: 6px 12px;
    margin: 0 0 20px 20px;
    cursor: pointer;
 
    width:auto;
    
 
    box-shadow: 0 0 0 4px #595959;
    -moz-box-shadow: 0 0 0 4px #595959;
    -webkit-box-shadow: 0 0 0 4px #595959;
    border: 0px solid #a4c5d0;
    color: #B5B5B5;
            -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.TTWForm .submit input:hover, .button_close:hover {
 
    box-shadow: 0 0 0 4px #e9eb4b;
    -moz-box-shadow: 0 0 0 4px #e9eb4b;
    -webkit-box-shadow: 0 0 0 4px #e9eb4b;
    color: #E2E2E2;
        -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    }
 
#form-title {
    padding: 12px;
}
 
#form-title h2{
    margin-bottom:0;
    color: #798e94;
}
 
/** Date Input **/
 
#calroot {
    z-index: 10000;
    margin-top: 200px;
    width: 488px;
    padding: 0px;
    background-color: #e9eb4b;
    font: 14px "Boblic", Helvetica, Verdana, sans-serif;
 
 
 
}
 
#calhead {
    padding: 2px 0;
    height: 22px;
}
 
#caltitle {
    font-size: 14px;
    color: #1D1D1D;
    float: left;
    text-align: center;
    width: 155px;
    line-height: 20px;
        margin-left:-20px;
 
}
0
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
04.10.2014, 17:25  [ТС] 7
Продолжение:
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

#calnext, #calprev {
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    cursor: pointer;
    background: transparent url(../images/prev.png) no-repeat center center scroll;
}
 
#calnext {
    float: right;
    background: transparent url(../images/next.png) no-repeat center center scroll;
}
 
#calprev.caldisabled, #calnext.caldisabled {
    visibility: hidden;
}
 
#caltitle select {
    font-size: 10px;
}
 
#caldays {
    height: 13px;
    margin-left:22px;
}
 
#caldays span {
    display: block;
    float: left;
 
    width: 60px;
    text-align: center;
}
 
#calweeks {
    background-color: #fff;
    margin-top: 4px;
    
}
 
.calweek {
    clear: left;
    height: 22px;
        margin-left: 22px;
    
}
 
.calweek a {
    display: block;
    float: left;
    width: 60px;
    height: 20px;
    text-decoration: none;
    font-size: 11px;
    margin-left: 1px;
    text-align: center;
    line-height: 20px;
    color: #666;
 
}
 
.calweek a:hover, .calfocus {
    background-color: #3B3B3B;
    color:#fff;
}
 
a.calsun {
    color: red;
}
 
a.caloff {
    color: #ccc;
}
 
a.caloff:hover {
    background-color: rgb(245, 245, 250);
}
 
a.caldisabled {
    background-color: #efefef !important;
    color: #ccc !important;
    cursor: default;
}
 
#calcurrent {
    background-color: #3B3B3B;
    color: #fff;
}
 
#caltoday {
    background-color: #333;
    color: #fff;
}
 
 
/** Range Input **/
 
.slider {
    background: #3C72E6 url(../images/range_gradient.png) repeat-x 0 0;
    height: 9px;
    position: relative;
    cursor: pointer;
    border: 1px solid #333;
    width: 100%;
    float: left;
    clear: right;
    margin-top: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: inset 0 0 8px #000;
}
 
.progress {
    height: 9px;
    background-color: #C5FF00;
    display: none;
    opacity: 0.6;
}
 
.handle {
    background: #fff url(../images/range_gradient.png) repeat-x 0 0;
    height: 28px;
    width: 28px;
    top: -12px;
    position: absolute;
    display: block;
    margin-top: 1px;
    border: 1px solid #000;
    cursor: move;
    -moz-box-shadow: 0 0 6px #000;
    -webkit-box-shadow: 0 0 6px #000;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
 
}
 
.range {
    border: 1px solid #ddd;
    float: left;
    font-size: 20px;
    margin: 0 0 0 15px;
    padding: 3px 0;
    text-align: center;
    width: 50px !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
 
 
/**Error Messages **/
 
.TTWForm .error {
    height: 16px;
    font: 11px/16px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
    color: #e9eb4b;
    padding-left: 12px;
    z-index: 999;
    position:relative;
    top:-1px;
}
 
 
/** Loading Indicator **/
.loading-text{
    position:relative;
    top:-3px;
}
 
/** IE Hacks **/
.TTWForm input{
    *height: 28px;
}
 
 
 
 
 
/*
    The following zoom:1 rule is specifically for IE6 + IE7.
    Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}
Добавлено через 47 секунд
Еще:

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383

/*
---
For use with the Uniform plugin:
[url]http://pixelmatrixdesign.com/uniform/[/url]
---
Generated by Uniform Theme Generator:
[url]http://pixelmatrixdesign.com/uniform/themer.html[/url]
 
*/
 
/* Global Declaration */
 
div.selector,
div.checker span,
div.radio span,
div.uploader,
div.uploader span.action {
    background-repeat: no-repeat;
}
 
.selector,
.radio,
.checker,
.uploader,
.selector *,
.radio *,
.checker *,
.uploader * {
    margin: 0;
    padding: 0;
}
 
/* SPRITES */
 
/* Select */
div.selector {
    padding: 0px 0px;
    background:transparent url(../images/select-bg.jpg) no-repeat right top scroll;
 
}
 
div.selector, div.selector.focus, div.selector.hover {
    background-position: right top;
    line-height: 28px;
    height: 28px;
 
 
}
 
 
div.selector span {
    height: 28px;
    line-height: 28px;
    padding: 0 0 0 6px;
}
 
div.selector select {
/* change these to adjust positioning of select element */
    top: 0px;
    left: 0px;
    cursor:pointer;
 
 
 
}
 
option {
    margin:0 510px 0 0;
    padding:0;
}
 
/* Checkbox */
 
div.checker {
 
    width: 19px;
    height: 19px;
}
 
div.checker input {
    width: 19px;
    height: 19px;
}
 
div.checker span {
    background:transparent url(../images/check-radio-bg.png) no-repeat left top scroll;
    height: 19px;
    width: 19px;
}
 
div.checker span.checked {
    background-position: right top;
}
 
/* Radio */
 
div.radio {
 
    width: 18px;
    height: 18px;
}
 
div.radio input {
    width: 18px;
    height: 18px;
}
 
div.radio span {
    height: 18px;
    width: 18px;
    background:transparent url(../images/check-radio-bg.png) no-repeat left bottom scroll;
}
 
div.radio span.checked {
    background-position: -17px bottom;
}
 
/* Uploader */
div.uploader{
    background:transparent url(../images/file-bg.jpg) no-repeat right top scroll;
}
 
div.uploader, div.uploader span.action {
    height: 28px;
}
 
div.uploader span.action {
    line-height: 28px;
}
 
div.uploader span.filename {
    height: 28px; /* change this line to adjust positioning of filename area */
    margin: 0 0 0 2px;
    line-height: 28px;
}
 
/* PRESENTATION */
 
/* Select */
div.selector {
    margin-bottom: 20px;
    width: 100%;
 
 
}
 
div.selector select {
    width: 100%;
    font: 14px "Boblic", Helvetica, Verdana, sans-serif;
        color: #B5B5B5;
        
 
}
 
div.selector span {
    cursor: pointer;
}
 
div.selector span {
    color: #B5B5B5;
    width: 100%;
 
}
 
div.selector.disabled span {
    color: #bbb;
}
 
/* Checker */
div.checker {
    margin-right: 10px;
}
 
/* Radio */
div.radio {
    margin-right: 10px;
}
 
/* Uploader */
div.uploader {
    width: 100%;
    margin-bottom: 20px;
    cursor: pointer;
}
 
div.uploader span.action {
    width: 85px;
    text-align: center;
    text-shadow: #fff 0px 1px 0px;
}
 
div.uploader span.filename {
    color: #798e94;
    width: 100%;
    border-right: solid 1px #bbb;
    font-size: 90%;
}
 
div.uploader input {
    width: 100%;
}
 
div.uploader.disabled span.action {
    color: #aaa;
}
 
div.uploader.disabled span.filename {
    border-color: #ddd;
    color: #aaa;
}
 
/*
 
CORE FUNCTIONALITY
 
Not advised to edit stuff below this line
-----------------------------------------------------
*/
 
.selector select:focus, .radio input:focus, .checker input:focus, uploader input:focus {
    outline: 0;
 
}
 
/* Select */
 
div.selector {
    position: relative;
    padding-left: 10px;
    overflow: hidden;
 
}
 
div.selector span {
    display: block;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
}
 
div.selector select {
    position: absolute;
    opacity: 0;
    height: 28px;
    border: none;
    color: #272727;
}
 
/* Checker */
 
div.checker {
    position: relative;
    float: left;
}
 
div.checker span {
    display: block;
    float: left;
    text-align: center;
}
 
div.checker input {
    opacity: 0;
    display: inline-block;
    background: none;
}
 
/* Radio */
 
div.radio {
    position: relative;
    float: left;
}
 
div.radio span {
    display: block;
    float: left;
    text-align: center;
}
 
div.radio input {
    opacity: 0;
    text-align: center;
    display: inline-block;
    background: none;
}
 
/* Uploader */
 
div.uploader {
    position: relative;
    float: left;
    overflow: hidden;
    padding: 0 !important;
}
 
div.uploader span.action {
    float: left;
    display: inline;
    padding: 2px 0px;
    overflow: hidden;
    cursor: pointer;
}
 
div.uploader span.filename {
    padding: 0px 10px;
    float: left;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
div.uploader input {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    float: right;
    height: 16px;
    border: none;
}
 
div.uploader span.action, div.uploader:hover span.action, div.uploader.active span.action, div.uploader.focus span.action {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 96px;
    height: 28px;
    text-indent: -99999px;
}
 
/** Fixes **/
 
div.checker input, div.radio input {
    margin: 0 !important;
    top: -1px;
}
 
div.selector {
    padding: 0 !important;
}
 
/** IE Hacks **/
 
textarea {
    height: 132px;
}
 
div.uploader span.filename{
    width:auto\9;
    border:none\9;
}
 
div.selector span{
    width:auto\9;
}
 
#caltitle {
    width: 152px \9;
}
 
#caldays span {
    width: 27px \9;
}
 
.calweek a {
    width: 26px \9;
}
 
/** IE6 Only **/
.radio-group input, .checkbox-group input{
    *border:none;
    *background:none;
    *top:6px;
    *position:relative;
    *width:18px;
}
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
06.10.2014, 20:12 8
А не может быть конфликта между тем css, что писали Вы, и тем, что бралось откуда-то - для формы?

У меня получилось так:
вставила на страницу форму и первую порцию css, отобразилось всё кривенько, и селект действительно не на месте. Зато фон черный с желтым.
Добавила остаток css - форма стала совершенно нормальной, но фон стал белый.

Т.е. не может быть, что стили перезаписываются?
1
Эксперт HTML/CSS
2964 / 2599 / 1068
Регистрация: 15.12.2012
Сообщений: 9,876
Записей в блоге: 11
06.10.2014, 23:02 9
Глядя на скрины, что Вы приложили к теме складывается впечатление, что в меню select завёлся объект с абсолютным позиционированием, который выпал из потока... Честно скажу Ваш код вёрстки я не читал поскольку он громоздкий и абсолютно не кроссбраузерный... Много сомнительных тегов хотя форма выглядит привлекательно... Такие браузеры, как ff очень требовательны к вёрстке и порой очень сложно найти тот тег или свойство, которое мешает корректному отображению желаемого результата(что заставляет задуматься...) Как вариант поиска бага можно попробовать использовать "инспектор кода" и посматривать каждый тег на совместимость с ff... Вопрос: стоит ли оно того?
1
06.10.2014, 23:02
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 06.10.2014, 23:02
Помогаю со студенческими работами здесь

Кривое отображение шрифтов Chrome
Добрый вечер Делал верстку сайта и столкнулся с такой проблемой - шрифты отображаются иначе, чем...

Съезжает верстка (кривое отображение)
Приветствую. Проблема: на сайте в верхнем меню изображена книжная полка с книгами. На главной...

Кривое отображение в мобильной версии
Здравствуйте уважаемые форумчане. Надеюсь на ваше подсказку. Проблема в следующем - изменили шапку...

Очень кривое отображение сайта в браузере
тружусь над первым сайтом в adobe dreamweaver около двух недель. Я создал в фотошопе дизайн и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru