Разные промежутки между div

Ivan Pomidorov · 12.10.2010, 13:56

Здравствуйте.
Пытаюсь разобраться с версткой дивами. Возник вопрос: на страничке 6 дивов, "левая колонка" и "центральная колонка" занимают всю высоту странички, а оставшиесь 4 дива расположены в правой колонке друг под другом. Все эти 4 дива fixed. Между ними промежутки заданые посредством top этих дивов (каждый промежуток 0.5 %). Но промежутки в опере и IE отображаются разными, в Firefox все нормально.
Подскажите, как сделать все промежутки равными?

код страницы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<link rel="stylesheet" href="./css/bas_css.css" type="text/css" />
<title>Fixed DIV</title>

</head>
<body>
<div id="left" style="color:#3F3">11111111</div>
<div id="main">
<script type="text/javascript">
var x=''
for (j=0;j<20;j++){
for(i=0;i<100;i++) {
x+=' text'
document.getElementById('main').innerHTML=x
}
x+='text <br>'
document.getElementById('main').innerHTML=x
}
</script>
MAINMAINMAINMIANMAINMAINMAINMIA NMAINMAINMAIN MIANMA INMAINMAINMIA NMAI NMAINMAINMIANMAINMAINMAIN MIANMAINMAINMAINMIAN MAINMAINMA INMIANMAINMAINMAINMIAN </div>
<div id="richt1" style="color:#3F0">richt1<br>richt1</div>
<div id="richt2" style="color:#3F3">richt2<br>richt2</div>
<div id="richt3" style="color:#3F6">richt3<br>richt3</div>
<div id="richt4" style="color:#3F9">richt4<br>richt4</div>

</body>
</html>

bas_css.css:
@charset "windows-1251";
/* CSS Document */

html,body{height:100%;}
body{margin:0;padding:0;background:#555;}
#left{width:10%;height:100%;background:#222;top:0p x;left:10%;border:1px solid #666;}
#main {width:50.5%;background:#777;margin-left:20.5%;top:0px; }
#richt{width:20%;height:100%;background:#222;top:0 px;left:71.5%;border:1px solid #666;}

#richt1{width:20%;height:25%;background:#223;top:0 %;left:71.5%;border:1px solid #663;}
#richt2{width:20%;height:25%;background:#223;top:2 5.5%;left:71.5%;border:1px solid #663;}
#richt3{width:20%;height:18.5%;background:#223;top :51%;left:71.5%;border:1px solid #663;}
#richt4{width:20%;height:30%;background:#223;top:7 0%;left:71.5%;border:1px solid #663;}

*html{overflow:hidden;}
*html #richt1{position:absolute;}
*html #richt2{position:absolute;}
*html #richt3{position:absolute;}
*html #richt4{position:absolute;}

html>body #richt1{position:fixed;}
html>body #richt2{position:fixed;}
html>body #richt3{position:fixed;}
html>body #richt4{position:fixed;}

html>body #left{position:fixed;}

Niemans · 12.10.2010, 14:22

как вариант проценты и fixed для ie, как штанга в 150кг для скрипача.

Макс-Текс · 12.10.2010, 14:57

Если не заморачиваться с дробными промежутками, то проблема должна решиться:

Код HTML:

#richt1{width:20%;height:25%;background:#223;top:0%;left:71.5%;border:1px solid #663;}
#richt2{width:20%;height:25%;background:#223;top:25%;left:71.5%;border:1px solid #663;}
#richt3{width:20%;height:20%;background:#223;top :50%;left:71.5%;border:1px solid #663;}
#richt4{width:20%;height:30%;background:#223;top:70%;left:71.5%;border:1px solid #663;}

В IE7,8 Opera 9, FF 3.5 корректно отображается.

Ivan Pomidorov · 12.10.2010, 15:21

В opere 10.62 1-q промежуток нормальный, 2-й в два раза больше, 3-й в 4 раза больше.
В IE 7 1-й и 2-й одинаковые, третий меньше.

Разница канечно не велика, но все же есть и в глаза бросается.

Макс-Текс · 12.10.2010, 15:29

Сделать недробными промежутки и высоты пробовали?

Ivan Pomidorov · 12.10.2010, 15:32

Изменил размеры, так чтобы не было десятичных знаков в процентах. Все стало отображаться нормально, во всех перечисленых браузерах.
Промежуток великоват, но не критично.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Пространство между столбцами	Seregina	HTML, CSS, JavaScript	8	14.07.2008 20:32
Мост между flash и JS	Cresh	HTML, CSS, JavaScript	2	28.05.2008 19:29
Перемещение между сценами	amamo	Технологии Flash	3	09.03.2006 07:36
Разные браузеры- разные глюки	LOm	HTML, CSS, JavaScript	4	24.03.2004 21:13
интервал между строками	Popelushka	HTML, CSS, JavaScript	1	22.05.2003 11:26

12.10.2010, 13:56	#1
Ivan Pomidorov	Здравствуйте. Пытаюсь разобраться с версткой дивами. Возник вопрос: на страничке 6 дивов, "левая колонка" и "центральная колонка" занимают всю высоту странички, а оставшиесь 4 дива расположены в правой колонке друг под другом. Все эти 4 дива fixed. Между ними промежутки заданые посредством top этих дивов (каждый промежуток 0.5 %). Но промежутки в опере и IE отображаются разными, в Firefox все нормально. Подскажите, как сделать все промежутки равными? код страницы: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ru"> <head> <link rel="stylesheet" href="./css/bas_css.css" type="text/css" /> <title>Fixed DIV</title> </head> <body> <div id="left" style="color:#3F3">11111111</div> <div id="main"> <script type="text/javascript"> var x='' for (j=0;j<20;j++){ for(i=0;i<100;i++) { x+=' text' document.getElementById('main').innerHTML=x } x+='text <br>' document.getElementById('main').innerHTML=x } </script> MAINMAINMAINMIANMAINMAINMAINMIA NMAINMAINMAIN MIANMA INMAINMAINMIA NMAI NMAINMAINMIANMAINMAINMAIN MIANMAINMAINMAINMIAN MAINMAINMA INMIANMAINMAINMAINMIAN </div> <div id="richt1" style="color:#3F0">richt1<br>richt1</div> <div id="richt2" style="color:#3F3">richt2<br>richt2</div> <div id="richt3" style="color:#3F6">richt3<br>richt3</div> <div id="richt4" style="color:#3F9">richt4<br>richt4</div> </body> </html> bas_css.css: @charset "windows-1251"; /* CSS Document / html,body{height:100%;} body{margin:0;padding:0;background:#555;} #left{width:10%;height:100%;background:#222;top:0p x;left:10%;border:1px solid #666;} #main {width:50.5%;background:#777;margin-left:20.5%;top:0px; } #richt{width:20%;height:100%;background:#222;top:0 px;left:71.5%;border:1px solid #666;} #richt1{width:20%;height:25%;background:#223;top:0 %;left:71.5%;border:1px solid #663;} #richt2{width:20%;height:25%;background:#223;top:2 5.5%;left:71.5%;border:1px solid #663;} #richt3{width:20%;height:18.5%;background:#223;top :51%;left:71.5%;border:1px solid #663;} #richt4{width:20%;height:30%;background:#223;top:7 0%;left:71.5%;border:1px solid #663;} html{overflow:hidden;} html #richt1{position:absolute;} html #richt2{position:absolute;} html #richt3{position:absolute;} html #richt4{position:absolute;} html>body #richt1{position:fixed;} html>body #richt2{position:fixed;} html>body #richt3{position:fixed;} html>body #richt4{position:fixed;} html>body #left{position:fixed;}

12.10.2010, 14:22	#2
Niemans	как вариант проценты и fixed для ie, как штанга в 150кг для скрипача.

12.10.2010, 15:21	#4
Ivan Pomidorov	В opere 10.62 1-q промежуток нормальный, 2-й в два раза больше, 3-й в 4 раза больше. В IE 7 1-й и 2-й одинаковые, третий меньше. Разница канечно не велика, но все же есть и в глаза бросается.

12.10.2010, 15:29	#5
Макс-Текс	Сделать недробными промежутки и высоты пробовали?

12.10.2010, 15:32	#6
Ivan Pomidorov	Изменил размеры, так чтобы не было десятичных знаков в процентах. Все стало отображаться нормально, во всех перечисленых браузерах. Промежуток великоват, но не критично.

Опции темы
Версия для печати Отправить по электронной почте