Смещения в разных браузерах

@Veygon · Регистрация: 07.04.2012

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

Кто мне может назвать причину смещений?????

в разных браузерах смещаются некоторые елементы какое позиционирование задавать????елементы в дивах и находится в диве также(блоке)..

@Dimedrol · 13.04.2012, 20:36

А вы не пробовали воспользоваться reset.css?

@Veygon · 13.04.2012, 20:40 **[ТС]**

нет,а чё с ним делать то??

@Dimedrol · 13.04.2012, 20:48

Он обнуляет свойства.
Скопируйте код с этой статьи http://meyerweb.com/eric/tools/css/reset/ и подключите перед своим css-ом. Возможно в одном браузере есть какие-то отступы, а в других нет, вот и плавают ваши блоки.

@Veygon · 13.04.2012, 20:58 **[ТС]**

Не не помогло так и остались смещения

@Dimedrol · 13.04.2012, 20:59

Код в студию

@Veygon · 13.04.2012, 21:05 **[ТС]**

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
<div id="shapka">
    
    <div>
    <a href="sdgsdsdfsdf" class="exit"><p>Выход</p></a>
    <a href="sdgsdsdfsdf" class="profil"><p>Ваш профиль:Гость</p></a>
    </div>
    
    
    <div id="qw">
     <form action="obrabotka.php" method="POST" name="forma">
     <p id="log">E-mail:<input type="text" name="parol" size="25" id="login" ></p>
     <p id="pass">Пароль:<input type="password" name="parol" size="25" id="password"/></p>
     </form>
     
    
    
    
     <form action="obrabotka.php">
     <button type="submit" class="vhod" >Вход</button>
     </form>
     
         
     <form action="obrabotka.php">
     <button type="submit" class="reg">Регистрация</button>
     </form>
    </div>
    
    
    </div>

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
 a:link, a:visited, a:hover, a:focus, a:active {outline:0;}          /* убирание рамки */
        
                  
    #shapka{                               /* шапка фона */
         background-color:#555453;
         width:98%;   
         height:98px;
         position:absolute;
         margin-left:3px;
         display:block;}
 
    
      
    .vhod{margin-top:-5px;              /*   кнопка входа  */                 
         margin-left:85px;
         display:block;
         width:53px;
         height:24px;   
         border-top: 1px solid #8FBC8F;  
         background: #649464;
         background: -webkit-gradient(linear, left top, left bottom, from(#8FBC8F), to(#649464));
         background: -moz-linear-gradient(top, #8FBC8F, #649464); 
         background: -o-linear-gradient(top, #8FBC8F, #649464);
         padding: 4.5px 9px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0;
         text-shadow: rgba(0,0,0,.4) 0 1px 0; 
         color: #ffffff; 
         font-size: 9px;
         font-family: helvetica, Serif; 
         text-decoration: none; 
         vertical-align: middle; } 
         .but:hover { 
         color: #ffffff; 
         background: #649464; 
         background: -webkit-gradient(linear, left top, left bottom, from(#8FBC8F), to(#649464));
         background: -moz-linear-gradient(top, #8FBC8F, #649464); 
         background: -o-linear-gradient(top, #8FBC8F, #649464); } 
         .but:active {
         border-top-color: #456c52;
         background: #456c52; }
         
    
    
    .reg {margin-top:-70px;        /* кнопка регистрации */
        margin-left:200px;
        display:block;
        border-top: 1px solid #8FBC8F;
        background: #649464;
        background: -webkit-gradient(linear, left top, left bottom, from(#8FBC8F), to(#649464));
        background: -moz-linear-gradient(top, #8FBC8F, #649464);
        background: -o-linear-gradient(top, #8FBC8F, #649464); 
        padding: 5px 10px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; 
        text-shadow: rgba(0,0,0,.4) 0 1px 0;
        color: white; 
        font-size: 14px; 
        font-family: Georgia, serif;
        text-decoration: none;
        vertical-align: middle; }
        .reg:hover { color: #000000; 
        background: #fafafa;
        background: -webkit-gradient(linear, left top, left bottom, from(#afb3b5), to(#fafafa));
        background: -moz-linear-gradient(top, #afb3b5, #fafafa);
        background: -o-linear-gradient(top, #afb3b5, #fafafa); } 
 
 
   
    #log {margin-left:0px; 
         margin-top:20px;                   /* отступы формы логина */
         vertical-align:middle ;
         font-size:13px;
         display:block;}
         
        
         
    #pass{margin-top:-11px;              /* отступы формы пароля */
          margin-left:0px;
          font-size:13px;
          display:block; }
         
         
           
    
        
    
    #login{font-size:11px;margin-left:5px;}             /*размер высоты поля для ввода информации */
    #password{font-size:11px;}   
   
    
 
 
    .exit{margin-left:915px;                 /* выход */ 
          margin-top:-5px;
          font-size:18px;
          color:black;        
          position:absolute;
          display:block;}
         .exit:hover{color:white;}
         
            
    .profil{margin-left:750px;
            margin-top:3px;                        /* профиль юзера */
            font-family:courier new;
            font-size:15px;
            white-space:nowrap;
            opacity: 0.5;
            color:#ecede8;
            position:absolute;
            display:block;}
           .profil:hover{color:black;}

@etalord · 13.04.2012, 21:50

а можете рисунок накидать, как выглядеть должно?

@Veygon · 13.04.2012, 21:51 **[ТС]**

Сообщение от etalord

а можете рисунок накидать, как выглядеть должно?

ок ща будет

@Veygon · 13.04.2012, 21:55 **[ТС]**

первый в мозилле а второй в хроме

@etalord · 13.04.2012, 21:56

да нет же, как должно выглядеть, а не как выглядит ))

@Veygon · 13.04.2012, 22:39 **[ТС]**

Сообщение от etalord

да нет же, как должно выглядеть, а не как выглядит ))

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

@etalord · 14.04.2012, 00:13

Если уж вы решили попрактиковаться в позиционировании, гляньте на такой вариант:

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
a:link, a:visited, a:hover, a:focus, a:active {outline:0;}          /* убирание рамки */
        
                  
#shapka{                               /* шапка фона */
     background-color:#555453;
     width:98%;   
     height:98px;
     position:absolute;
     margin-left:3px;
     display:block;}
 
#wrap_forms {position:relative; width:900px;}
#left_part {position: absolute; right:0;}
#left_part a {float: left; margin-left:10px;}
 
.profil {
    color: #ECEDE8;
    font-family: courier new;
    font-size: 15px;
    opacity: 0.5;
    white-space: nowrap;
    position: relative;
    top:4px;
}
.exit {
    color: black;
    font-size: 18px;
}
#qw {position: relative}
#qw p {margin: 0;}
#log {position: absolute; top:0; left:1px; font-size: 13px;}
#pass {position: absolute; top:22px; left:1px; font-size: 13px;}
.vhod {position: absolute; top:50px; left:85px; background: -moz-linear-gradient(center top , #8FBC8F, #649464) repeat scroll 0 0 transparent;
    border-radius: 0 0 0 0;
    border-top: 1px solid #8FBC8F;
    box-shadow: 0 1px 0 #000000;
    color: #FFFFFF;
    display: block;
    font-family: helvetica,Serif;
    font-size: 9px;
    height: 24px;
    padding: 4.5px 9px;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    vertical-align: middle;
    width: 53px;}
.reg {position: absolute; top:7px; left:200px; background: -moz-linear-gradient(center top , #8FBC8F, #649464) repeat scroll 0 0 transparent;
    border-radius: 0 0 0 0;
    border-top: 1px solid #8FBC8F;
    box-shadow: 0 1px 0 #000000;
    color: white;
    display: block;
    font-family: Georgia,serif;
    font-size: 14px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    vertical-align: middle;}
 
#login, #password {font-size: 11px;}
#login {margin-left:5px;}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="shapka">
    <div id="wrap_forms">
        <div id="left_part">
            <a href="sdgsdsdfsdf" class="profil">Ваш профиль:Гость</a>
            <a href="sdgsdsdfsdf" class="exit">Выход</a>
        </div>
        
        <form id="qw" action="obrabotka.php" method="POST" name="forma">
        <p id="log">E-mail:<input type="text" name="parol" size="25" id="login" ></p>
        <p id="pass">Пароль:<input type="password" name="parol" size="25" id="password"/></p>
        <button type="submit" class="vhod" >Вход</button>
        <button type="submit" class="reg">Регистрация</button>
        </form>
 
    </div>
</div>

Но вообще это далеко от хорошей верстки - какие-то непонятные теги абзаца, где не надо. Выравнивание в формах обычно таблицей делают. Форма на самом деле одна, а у вас их три или четыре насчитал )) Да и вообще можно было флоатами сверстать, имхо

@Veygon · 14.04.2012, 00:21 **[ТС]**

ну так а что изменилось?? вы проверяли в обоих браузерах????все одинаково???

Добавлено через 57 секунд
потому-что у меня ничего не изменилось.....мож всё дело в самих браузерах а не коде?

@etalord · 14.04.2012, 00:29

сорь, в хроме не смотрел )) я уже засыпаю )
там осталось допилить немного - задать инпутам ширину через css, а то она разная выходит. ну и ещё по мелочи. если не разберетесь, завтра гляну ещё

@Veygon · 14.04.2012, 00:30 **[ТС]**

Сообщение от etalord

сорь, в хроме не смотрел )) я уже засыпаю )
там осталось допилить немного - задать инпутам ширину через css, а то она разная выходит. ну и ещё по мелочи. если не разберетесь, завтра гляну ещё

ок, спасибо, за старания....

@etalord · 14.04.2012, 00:35

Ну вот допилил ))

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
a:link, a:visited, a:hover, a:focus, a:active {outline:0;}          /* убирание рамки */
        
                  
#shapka{                               /* шапка фона */
     background-color:#555453;
     width:98%;   
     height:98px;
     position:absolute;
     margin-left:3px;
     display:block;}
 
#wrap_forms {position:relative; width:900px;}
#left_part {position: absolute; right:0;}
#left_part a {float: left; margin-left:10px;}
 
.profil {
    color: #ECEDE8;
    font-family: courier new;
    font-size: 15px;
    opacity: 0.5;
    white-space: nowrap;
    position: relative;
    top:4px;
}
.exit {
    color: black;
    font-size: 18px;
}
#qw {position: relative}
#qw p {margin: 0;}
#log {position: absolute; top:3px; left:1px; font-size: 13px;}
#pass {position: absolute; top:25px; left:1px; font-size: 13px;}
.vhod {position: absolute; top:50px; left:85px; background: -moz-linear-gradient(center top , #8FBC8F, #649464) repeat scroll 0 0 transparent;
    border-radius: 0 0 0 0;
    border-top: 1px solid #8FBC8F;
    box-shadow: 0 1px 0 #000000;
    color: #FFFFFF;
    display: block;
    font-family: helvetica,Serif;
    font-size: 9px;
    height: 24px;
    padding: 4.5px 9px;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    vertical-align: middle;
    width: 53px;}
.reg {position: absolute; top:7px; left:200px; background: -moz-linear-gradient(center top , #8FBC8F, #649464) repeat scroll 0 0 transparent;
    border-radius: 0 0 0 0;
    border-top: 1px solid #8FBC8F;
    box-shadow: 0 1px 0 #000000;
    color: white;
    display: block;
    font-family: Georgia,serif;
    font-size: 14px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    vertical-align: middle;}
 
#login, #password {font-size: 11px; width:150px; position: absolute; left:40px;}
#login {margin-left:5px; top:0px;}
#password {margin-left:5px; top:22px;}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="shapka">
    <div id="wrap_forms">
        <div id="left_part">
            <a href="sdgsdsdfsdf" class="profil">Ваш профиль:Гость</a>
            <a href="sdgsdsdfsdf" class="exit">Выход</a>
        </div>
        
        
        <form id="qw" action="obrabotka.php" method="POST" name="forma">
        <div id="log">E-mail:</div><input type="text" name="parol" size="25" id="login" >
        <div id="pass">Пароль:</div><input type="password" name="parol" size="25" id="password"/>
 
        <button type="submit" class="vhod" >Вход</button>
 
        <button type="submit" class="reg">Регистрация</button>
        </form>
 
    </div>
</div>

@Veygon · 14.04.2012, 01:40 **[ТС]**

Блин, слушай даже всё работает как надо

Вот только пытался понять что ж ты там изменил(не люблю брать готовое,я просто привык изначально всё хорошо понять,чтоб потом проблем не было)....что ты там такого нарисовал,чего нету у меня....да так и не увидел....Чё в задумке то было скажешь???Может что-то было основное ???Просто я, если честно, ничего так и не понял

хоть убей.

@etalord · 14.04.2012, 02:05

Это правильный подход ) Ща в пару словах объясню принцип абсолютного позиционирования (он хорош тем, что в любых браузерах точен).

Итак, необходимое условие - родительский блок у абсолютно позиционируемых элементов должен быть тоже спозиционирован - absolute или relative неважно. Это просто нужно запомнить. В противном случае в некоторых браузерах элементы будут позиционироваться не от родительского блока, а от верхнего левого угла браузера.

Далее каждому позиционируемому элементу задаешь position:absolute и отступы от верхнего левого угла родительского блока (top, left). Можно также использовать bottom и right. Вот, собственно, и всё )

Добавлено через 8 минут
Посмотри внимательней: я создал обертку wrap_forms, которой задал ширину в 900px и position:relative. В ней я сказал блоку left_part (ошибся, надо было его назвать right_part) будь absolute и прижмись к правому боку - right:0
Основной форме qw я сказал быть relative. А дальше смотри внимательней - каждый (!) блок в ней имеет position:absolute и свои top и left

Добавлено через 3 минуты
И да! Если ты ещё не начал пользоваться firebug, срочно устанавливай и начинай

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Veygon 21 / 21 / 2 Регистрация: 07.04.2012 Сообщений: 299

	Смещения в разных браузерах 13.04.2012, 20:24. Показов 8838. Ответов 18 Метки нет (Все метки) Кто мне может назвать причину смещений????? в разных браузерах смещаются некоторые елементы какое позиционирование задавать????елементы в дивах и находится в диве также(блоке).. 0

@Dimedrol 2378 / 941 / 129 Регистрация: 25.04.2009 Сообщений: 2,635 Записей в блоге: 4
	13.04.2012, 20:36
	А вы не пробовали воспользоваться reset.css? 1

@Veygon 21 / 21 / 2 Регистрация: 07.04.2012 Сообщений: 299
	13.04.2012, 20:40 [ТС]
	нет,а чё с ним делать то?? 0

@Dimedrol 2378 / 941 / 129 Регистрация: 25.04.2009 Сообщений: 2,635 Записей в блоге: 4
	13.04.2012, 20:48
	Он обнуляет свойства. Скопируйте код с этой статьи http://meyerweb.com/eric/tools/css/reset/ и подключите перед своим css-ом. Возможно в одном браузере есть какие-то отступы, а в других нет, вот и плавают ваши блоки. 1

@Veygon 21 / 21 / 2 Регистрация: 07.04.2012 Сообщений: 299
	13.04.2012, 20:58 [ТС]
	Не не помогло так и остались смещения 0

@Dimedrol 2378 / 941 / 129 Регистрация: 25.04.2009 Сообщений: 2,635 Записей в блоге: 4
	13.04.2012, 20:59
	Код в студию 1

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	13.04.2012, 21:50
	а можете рисунок накидать, как выглядеть должно? 1

@Veygon 21 / 21 / 2 Регистрация: 07.04.2012 Сообщений: 299
	13.04.2012, 21:55 [ТС]
	первый в мозилле а второй в хроме Миниатюры 0

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	13.04.2012, 21:56
	да нет же, как должно выглядеть, а не как выглядит )) 1

@Veygon 21 / 21 / 2 Регистрация: 07.04.2012 Сообщений: 299
	14.04.2012, 00:21 [ТС]
	ну так а что изменилось?? вы проверяли в обоих браузерах????все одинаково??? Добавлено через 57 секунд потому-что у меня ничего не изменилось.....мож всё дело в самих браузерах а не коде? 0

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	14.04.2012, 00:29
	сорь, в хроме не смотрел )) я уже засыпаю ) там осталось допилить немного - задать инпутам ширину через css, а то она разная выходит. ну и ещё по мелочи. если не разберетесь, завтра гляну ещё 1

@Veygon 21 / 21 / 2 Регистрация: 07.04.2012 Сообщений: 299
	14.04.2012, 01:40 [ТС]
	Блин, слушай даже всё работает как надоВот только пытался понять что ж ты там изменил(не люблю брать готовое,я просто привык изначально всё хорошо понять,чтоб потом проблем не было)....что ты там такого нарисовал,чего нету у меня....да так и не увидел....Чё в задумке то было скажешь???Может что-то было основное ???Просто я, если честно, ничего так и не понялхоть убей. 0

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	14.04.2012, 02:05
	Это правильный подход ) Ща в пару словах объясню принцип абсолютного позиционирования (он хорош тем, что в любых браузерах точен). Итак, необходимое условие - родительский блок у абсолютно позиционируемых элементов должен быть тоже спозиционирован - absolute или relative неважно. Это просто нужно запомнить. В противном случае в некоторых браузерах элементы будут позиционироваться не от родительского блока, а от верхнего левого угла браузера. Далее каждому позиционируемому элементу задаешь position:absolute и отступы от верхнего левого угла родительского блока (top, left). Можно также использовать bottom и right. Вот, собственно, и всё ) Добавлено через 8 минут Посмотри внимательней: я создал обертку wrap_forms, которой задал ширину в 900px и position:relative. В ней я сказал блоку left_part (ошибся, надо было его назвать right_part) будь absolute и прижмись к правому боку - right:0 Основной форме qw я сказал быть relative. А дальше смотри внимательней - каждый (!) блок в ней имеет position:absolute и свои top и left Добавлено через 3 минуты И да! Если ты ещё не начал пользоваться firebug, срочно устанавливай и начинай 1