Позиционирование блоков для разных браузеров

@ajttajtt · Регистрация: 12.04.2014

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

Возникла такая проблема, в hrome и IE все нормально, а в firfox блоку нужно другой top установить чтобы блоки правильно легли. Как в css решается проблема разного отображения информации, можно ли условие на имя браузера в css поставить?

@Fedor92 · 24.09.2014, 21:31

Вообще можно - это делается префиксами(например -moz, -o, -webkit, -khtml, -icab или -ms)... В Вашем случае могу дать только один совет всегда проверяйте вёрстку на ff и ie сразу, а чтобы не было казусов сразу же задавайте размеры блоков... Мне почему-то кажется, что речь идёт именно о текстовом блоке...

@ajttajtt · 24.09.2014, 21:51 **[ТС]**

Ну у меня блоки все с размерами, а на том от которого отсчитывается проблемный блок, там стоит min-height. Может быть в этом проблема?

@Fedor92 · 24.09.2014, 21:56

Используйте дедовский способ... Для блоков задайте border:1px solid; и увидите какой уползает именно в ff... ну а потом поиграйте со свойствами ширины и высоты... min-height -очень может быть причиной...

@ajttajtt · 24.09.2014, 22:38 **[ТС]**

Дело в том что я знаю какие блоки нужно подправить, попробовал префикс добавить, но ноль результата,вот:

CSS
1
2
3
4
5
6
7
8
#footer {
    height: 80px;
    width: 200px;
    z-index: 10;
    position: relative;
    top: 65px;
    left: -373px;
    -moz-top: 75px;

Добавлено через 1 минуту
Я префикс правильно использовал?

@Fedor92 · 24.09.2014, 22:39

Префикс не поможет, в Вашем случае... Я прав насчёт текстового блока? Стоп... А для чего Вам top? Я конечно понимаю, что код Вы выложить не можете... Хотя бы на параметры основных блоков можно взглянуть?

@ajttajtt · 24.09.2014, 23:51 **[ТС]**

Нет, текста там нет, пока нет. У меня идут блоки с относительным позиционированием, вот они:

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
@charset "windows-1251";
body {
    overflow-x: hidden; 
        
}
#box {
    margin: 0 auto;
    width: 200px;
    height: 100px;  
}
#fon {
    height: 100px;
    width: 1600px;
    left: -700px;
    top: -8px;
    position: relative;
    z-index: -1;
}
#menu {
    position: relative;
    height: 100px;
    min-width: 1020px;
    top: 102px;
    left: -373px;
    z-index: 1;
}
#telo {
    position: relative;
    width: 949px;
    min-height: 1300px;
    z-index: 4;
    left: -372px;
    top: 80px;
    background-color: #FFF;
}
#footer {
    height: 80px;
    width: 200px;
    z-index: 10;
    position: relative;
    top: 65px;
    left: -373px;
    -moz-top: 75px;
}
#fon2 {
    z-index: 3;
    height: 100%;
    width: 100%;
    position: relative;
    left: -700px;
    top: -908px;
}

Добавлено через 10 минут
У меня в блоках не текст, а картинки.

@Fedor92 · 25.09.2014, 00:21

А как они должны стоять по html...?

@ajttajtt · 25.09.2014, 12:25 **[ТС]**

Сначала идет блок

box

Внутри него все остальные, сначала идут:
fon
menu
telo

И после этого footer и fon2 - это два дива в подвале, вот они как раз расположены не так как в других браузерах, в фаерфоксе они "завышены". В IE и хроме - четко ложатся.

@Fedor92 · 25.09.2014, 15:17

У вас блок box слишком маленький для того, чтобы в него уместились все остальные блоки... Это во первых... Во - вторых когда я применил стили у меня получился полный хаос из чего следует: лучше в пейнт мне начертите макет Вашей страницы и блоков внутри(и их высоту) неё прямоугольниками и я Вам сделаю вёрстку..

@ajttajtt · 25.09.2014, 15:42 **[ТС]**

У меня box маленький, но он несет функцию центрирования всего сайта. Тоесть разницы нет маленький он или большой, главное что все блоки внутри него.
Верстка очень простая у меня, все блоки идут с позиционированием relative внутри блока box. У меня только в фаерфоксе сдвиг подвальных блоков, в других браузерах нормально.

Добавлено через 3 минуты
А почему префиксами в css нельзя подправить? Если нельзя, то может быть в php как-то указать можно отдельно для фаерфокса?

@Ukkas · 25.09.2014, 15:43

ajttajtt, покажите код html. Стили сбрасывали? Проблема в верстке, блоки не должны съезжать в разных браузерах. Поэтому костылями не надо

@ajttajtt · 25.09.2014, 16:53 **[ТС]**

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
 
<body onload="MM_preloadImages('images/image1_03.jpg','images/image1_04.jpg','images/image1_05.jpg','images/image1_06.jpg','images/image1_07.jpg','images/image1_08.jpg','images/image1_09.jpg','images/image1_10.jpg','images/image1_11.jpg')">
 
<div id="box">
  <div id="fon">
    <img src="images/logo_01.jpg" width="1600" height="559" />
  </div>
  
  <div id="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/image1_03.jpg',1)"><img src="images/image_03.jpg" name="Image4" width="172" height="54" border="0" id="Image4" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/image1_04.jpg',1)"><img src="images/image_04.jpg" name="Image5" width="103" height="54" border="0" id="Image5" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/image1_05.jpg',1)"><img src="images/image_05.jpg" name="Image6" width="102" height="54" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/image1_06.jpg',1)"><img src="images/image_06.jpg" name="Image7" width="79" height="54" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/image1_07.jpg',1)"><img src="images/image_07.jpg" name="Image8" width="80" height="54" border="0" id="Image8" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/image1_08.jpg',1)"><img src="images/image_08.jpg" name="Image9" width="97" height="54" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/image1_09.jpg',1)"><img src="images/image_09.jpg" name="Image10" width="78" height="54" border="0" id="Image10" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/image1_10.jpg',1)"><img src="images/image_10.jpg" name="Image11" width="69" height="54" border="0" id="Image11" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/image1_11.jpg',1)"><img src="images/image_11.jpg" name="Image12" width="172" height="54" border="0" id="Image12" /></a></div>
 
<div id="telo">
    <span class="category">Программы</span><br />
    <span class="zagolovok">Спортивное питание от Тенториум</span><br />
    <span class="data">24.04.2014</span><br />
    <span class="text1">Здесь будет текст.</span>
 
  <div id="line"><img src="images/line_03.jpg" width="18" height="1038" /></div>
  
  <div id="news">
    <img src="images/news_03.jpg" width="158" height="34" />
    <p><span class="n1">24.04.1014</span><span class="n2">Это новость 1</span></p>
    <p><span class="n1">14.07.2014</span><br />
      <span class="n2">Это новос2</span></p>
  </div>
</div>
 
<div id="footer"><img src="images/podval_03.jpg" width="950" height="88" />
<div class="copyright">2014 © Здоровьесберегающие технологии</div>
<div class="mahaon">Разработка "Махаон"</div>
<div class="telefon">8(8652) 60-88-949</div>
<div class="mail">E-mail: tentorium26@bk.ru</div>
</div>
 
<div id="fon2"><img src="images/fon2_02.jpg" width="1600" height="981" /></div>
</div>
</body>
</html>

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
@charset "windows-1251";
body {
    overflow-x: hidden; 
        
}
#box {
    margin: 0 auto;
    width: 200px;
    height: 100px;  
}
#fon {
    height: 100px;
    width: 1600px;
    left: -700px;
    top: -8px;
    position: relative;
    z-index: -1;
}
#menu {
    position: relative;
    height: 100px;
    min-width: 1020px;
    top: 102px;
    left: -373px;
    z-index: 1;
}
#telo {
    position: relative;
    width: 949px;
    min-height: 1300px;
    z-index: 4;
    left: -372px;
    top: 80px;
    background-color: #FFF;
}
#footer {
    height: 80px;
    width: 200px;
    z-index: 10;
    position: relative;
    top: 65px;
    left: -373px;
    -moz-top: 75px;
}
#fon2 {
    z-index: 3;
    height: 100%;
    width: 100%;
    position: relative;
    left: -700px;
    top: -908px;
}
.category {
    padding-left:20px;
    color: #f61b30;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.zagolovok{
    padding-left: 200px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #378ccf;
    }
.data {
    padding-left: 320px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #9e9c9c; 
    }
.text1 {
    padding-right: 200px;
    padding-left: 20px;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #484848;
}
#line {
    position: relative;
    height: 20px;
    width: 30px;
    left: 730px;
    top: 20px;
}
#news{
    position: relative;
    min-height: 180px;
    width: 158px;
    left: 767px;
    top: -50px;
    background-color: #f7eec9;
}
.n1 {
    color: #378ccf;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-left: 10px; 
}
.n2 {
    color: #484848;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-right: 10px;
    padding-left: 10px;
    display: inline-block;
}
.copyright {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFF;
    top: -40px;
    left: 320px;
    position: relative;
    height: 30px;
    width: 300px;
    }
.mahaon {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #6b6b6b;
    top: -70px;
    left: 80px;
    position: relative;
    height: 30px;
    width: 200px;
    }
.telefon {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #eeeb15;
    top: -130px;
    left: 720px;
    position: relative;
    height: 30px;
    width: 200px;
    }
.mail {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #f61b30;
    top: -130px;
    left: 720px;
    position: relative;
    height: 30px;
    width: 200px;
    }

Добавлено через 1 минуту
В фаерфоксе внизу белая полоса. В других браузерах нет её, и не должно быть.

@ajttajtt · 25.09.2014, 16:59 **[ТС]**

Эта белая полоса внизу только в фаерфоксе вылазеет.

@ajttajtt · 25.09.2014, 18:03 **[ТС]**

Вот тут у человека такая же проблема что и у меня http://wysiwygwebbuilder.ru/fo... f=12&t=876

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@ajttajtt 1 / 1 / 2 Регистрация: 12.04.2014 Сообщений: 252

	Позиционирование блоков для разных браузеров 24.09.2014, 21:15. Показов 2507. Ответов 14 Метки нет (Все метки) Возникла такая проблема, в hrome и IE все нормально, а в firfox блоку нужно другой top установить чтобы блоки правильно легли. Как в css решается проблема разного отображения информации, можно ли условие на имя браузера в css поставить? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	24.09.2014, 21:31
	Вообще можно - это делается префиксами(например -moz, -o, -webkit, -khtml, -icab или -ms)... В Вашем случае могу дать только один совет всегда проверяйте вёрстку на ff и ie сразу, а чтобы не было казусов сразу же задавайте размеры блоков... Мне почему-то кажется, что речь идёт именно о текстовом блоке... 0

@ajttajtt 1 / 1 / 2 Регистрация: 12.04.2014 Сообщений: 252
	24.09.2014, 21:51 [ТС]
	Ну у меня блоки все с размерами, а на том от которого отсчитывается проблемный блок, там стоит min-height. Может быть в этом проблема? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	24.09.2014, 21:56
	Используйте дедовский способ... Для блоков задайте border:1px solid; и увидите какой уползает именно в ff... ну а потом поиграйте со свойствами ширины и высоты... min-height -очень может быть причиной... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	24.09.2014, 22:39
	Префикс не поможет, в Вашем случае... Я прав насчёт текстового блока? Стоп... А для чего Вам top? Я конечно понимаю, что код Вы выложить не можете... Хотя бы на параметры основных блоков можно взглянуть? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	25.09.2014, 00:21
	А как они должны стоять по html...? 0

@ajttajtt 1 / 1 / 2 Регистрация: 12.04.2014 Сообщений: 252
	25.09.2014, 12:25 [ТС]
	Сначала идет блок box Внутри него все остальные, сначала идут: fon menu telo И после этого footer и fon2 - это два дива в подвале, вот они как раз расположены не так как в других браузерах, в фаерфоксе они "завышены". В IE и хроме - четко ложатся. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	25.09.2014, 15:17
	У вас блок box слишком маленький для того, чтобы в него уместились все остальные блоки... Это во первых... Во - вторых когда я применил стили у меня получился полный хаос из чего следует: лучше в пейнт мне начертите макет Вашей страницы и блоков внутри(и их высоту) неё прямоугольниками и я Вам сделаю вёрстку.. 0

@ajttajtt 1 / 1 / 2 Регистрация: 12.04.2014 Сообщений: 252
	25.09.2014, 15:42 [ТС]
	У меня box маленький, но он несет функцию центрирования всего сайта. Тоесть разницы нет маленький он или большой, главное что все блоки внутри него. Верстка очень простая у меня, все блоки идут с позиционированием relative внутри блока box. У меня только в фаерфоксе сдвиг подвальных блоков, в других браузерах нормально. Добавлено через 3 минуты А почему префиксами в css нельзя подправить? Если нельзя, то может быть в php как-то указать можно отдельно для фаерфокса? 0

@Ukkas 153 / 126 / 39 Регистрация: 02.05.2012 Сообщений: 573
	25.09.2014, 15:43
	ajttajtt, покажите код html. Стили сбрасывали? Проблема в верстке, блоки не должны съезжать в разных браузерах. Поэтому костылями не надо 0

@ajttajtt 1 / 1 / 2 Регистрация: 12.04.2014 Сообщений: 252
	25.09.2014, 16:59 [ТС]
	Эта белая полоса внизу только в фаерфоксе вылазеет. Миниатюры 0

@ajttajtt 1 / 1 / 2 Регистрация: 12.04.2014 Сообщений: 252
	25.09.2014, 18:03 [ТС]
	Вот тут у человека такая же проблема что и у меня http://wysiwygwebbuilder.ru/fo... f=12&t=876 0