Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы Разные промежутки между div в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здравствуйте. Пытаюсь разобраться с версткой дивами. Возник вопрос: на страничке 6 дивов, "левая колонка" и "центральная колонка" занимают всю высоту странички, а оставшиесь ...


Закрытая тема
 
Опции темы
Старый 12.10.2010, 13:56   #1
Здравствуйте.
Пытаюсь разобраться с версткой дивами. Возник вопрос: на страничке 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, 13:56
Ссылки
Старый 12.10.2010, 14:22   #2
как вариант проценты и fixed для ie, как штанга в 150кг для скрипача.
 
Старый 12.10.2010, 14:57   #3
Если не заморачиваться с дробными промежутками, то проблема должна решиться:
Код 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 корректно отображается.
 
Старый 12.10.2010, 15:21   #4
В opere 10.62 1-q промежуток нормальный, 2-й в два раза больше, 3-й в 4 раза больше.
В IE 7 1-й и 2-й одинаковые, третий меньше.

Разница канечно не велика, но все же есть и в глаза бросается.
 
Старый 12.10.2010, 15:29   #5
Сделать недробными промежутки и высоты пробовали?
 
Старый 12.10.2010, 15:32   #6
Изменил размеры, так чтобы не было десятичных знаков в процентах. Все стало отображаться нормально, во всех перечисленых браузерах.
Промежуток великоват, но не критично.
 
Старый 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


Текущее время: 11:46. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум