| |
|
|
| | Здравствуйте, вот такая у меня проблема:
Решил сверстать сайт на div'ах структура такая:
<body>
<div id=1>
<div id=2>
<div id=3>
...
</div>
</div>
</div>
</body>
так вот у всех блоков задан цвет, но броузеры Mozilla и Netscape видят цвет только внутренних блоков, а цвет основного, в котором все остальные размещены не воспринимают. Выглядит это так: на темном фоне раскидана куча белых "квадратиков". Отвратительно. В Опере и Эксплорере все нормально.
Что нужно делать? У всех все нормально, а я на какой-то мелочи запоролся...
Спасибо. | |
| |
|
|
| |
|
|
| |
для: dax
(29.12.2005 в 17:15)
| | | Вы бы фрагмент CSS привели с демонстрацией, это сильно ускорило бы подсказку.
возможно, там нужно display:block прописать, но всё зависит от кода. | |
| |
|
|
| |
|
|
| |
для: 12345
(29.12.2005 в 17:30)
| | | body {
margin: 0 0 5px 0px;
padding: 0px;
font-size: 9pt;
background-color: #555555;}
#layout {
width: 775px;
margin: 0px;
padding: 0px;
tetx-align: left;
background-color: #ffffff;}
#topics {
width: 100%;
position: relative;
top: 20px;
margin: 0 10 0 10px;
padding: 10px;
background-color: #ffffff;}
#work {
float: left;
width: 390px;
position: relative;
top: 40px;
left: 0px;
margin: 5px;
text-align: left;
border:1px solid #D0E4FD;
border-top:0;
background-color: #ffffff;}
и далее в таком же духе. Все блоки внутри блока "layout", но вот цвет этого layout'а не показывается. Получается, что каждый блок сам по себе, а не вложен в ...ну вы поняли. | |
| |
|
|
| |
 10.2 Кб |
|
| |
для: dax
(29.12.2005 в 17:57)
| | | Лучше бы конкретный пример, чтобы скопировать (и есть code, чтобы лидирующие пробелы не пропадали). А то вот сделал пример, и в нём все цвета есть (FireFox 1.06, скриншот во вложении). В порядке описания CSS ничего не менял. Код:
<STYLE>body {
margin: 0 0 5px 0px;
padding: 0px;
font-size: 9pt;
background-color: #aaaaaa;}
#layout {
width: 775px;
margin: 0px;
padding: 0px;
tetx-align: left;
background-color: #bbffff;}
#topics {
width: 80%;
position: relative;
top: 120px;
left: 100px;
margin: 0 10 0 10px;
padding: 10px;
background-color: #ffbbff;}
#work {
float: left;
width: 390px;
position: relative;
top: 40px;
left: 0px;
margin: 5px;
text-align: left;
border:1px solid #D0E4FD;
border-top:0;
background-color: #ffffbb;}
</STYLE>
<body>body
<div id=layout>layout
<div id=topics>topics
<div id=work>work
... 33333333333333
</div>22222222222
</div>111111111111
</div>0000000000
</body>
|
Наблюдаются, конечно, различия в положении текстов в разных бр., но это другая история. | |
| |
|
|
| |
|
|
| |
для: 12345
(29.12.2005 в 18:43)
| | | Прошу прощения что сразу без кода. Вот код:
<html>
<head>
<title></title>
<style>
body {
margin: 0 0 5px 0px;
padding: 0px;
font-size: 9pt;
background-color: #555555;}
#layout {
width: 775px;
margin: 0px;
padding: 0px;
tetx-align: left;
background-color: #ffffff;}
#top_left {
width: 100%;
position: relative;
margin: 0px;
text-align: left;
padding-left: 10px;
background: #ffffff;}
#top_right {
float:right;
position: relative;
top: 5px;
padding-right: 10px;
background: #ffffff;}
#main_menu ul {
list-style-type: none;
margin: 0;
margin-top: 20px;
padding-left: 5px;
text-align: center;}
#main_menu ul li {display: inline;}
#main_menu ul li a {
text-decoration: none;
font-size: 12pt;
font-weight: bold;
padding: .4em 1.7em;
color: #000000;
background-color: #C6DED8;}
#main_menu ul li a:hover {
font-weight: bold;
color: #ffffff;
background-color: #9ECBC0;}
#topics {
width: 100%;
position: relative;
top: 20px;
margin-left: 10px;
padding: 0px;
text-align: left;
background-color: #ffffff;}
#topics ul li a:hover {
text-decoration: underline;}
#work {
float: left;
width: 390px;
position: relative;
top: 40px;
left: 0px;
margin: 5px;
text-align: left;
border:1px solid #D0E4FD;
background-color: #ffffff;}
#lab {
width: 360px;
float: right;
position: relative;
top: 40px;
margin: 5px;
text-align: left;
border:1px solid #D0E4FD;
background-color: #ffffff;}
#news {
float: left;
width: 390px;
position: relative;
top: 40px;
left: 0px;
margin: 5px;
text-align: left;
background-color: #ffffff;}
</style>
</head>
<body>
<center>
<div id="layout">
<div id="top_left">top_left<br>top_left<br>top_left<br>
<div id="top_right">top_right
</div>
</div>
<div id="main_menu">
<ul>
<li><a href="#">menu_1</a></li>
<li><a href="#">menu_2</a></li>
<li><a href="#">menu_3</a></li>
<li><a href="#">menu_4</a></li>
<li><a href="#">menu_5</a></li>
<li><a href="#">menu_6</a></li>
<li><a href="#">menu_7</a></li>
</ul>
</div>
<div id="topics">topics<br>topics<br>topics<br>
</div>
<div id="work">work<br>work<br>work<br>
</div>
<div id="lab">lab<br>lab<br>lab<br>
</div>
<div id="news">news<br>news<br>news<br>
</div>
</div>
</center>
</body>
</html>
Тут видно что не так. Почему-то вложенность всех блоков в layout никак не сказывается на его "растяжимости" по высоте (нет цвета). А в Mozilla и Netscape вообще каждый блок сам по себе. | |
| |
|
|
| |
31.6 Кб |
|
| |
для: dax
(29.12.2005 в 19:40)
| | | Наблюдается такое, что в FF место под relative НЕ выделяется, поэтому высота #layout становится меньше. Но того, что Вы говорили - нет фона, такого нет. Фон есть, но меньшей высоты. Сделайте высоту явно заданной
#layout {
width: 775px;
margin: 0px;
padding: 0px;
height:333;
tetx-align: left;
background-color: #ffffff;}
|
Вот что имеем при таком изменении "там и здесь" (вложение).
Чтобы ширины были точными в разных бр., конечно, нужно пошаманить с атрибутами стилей, это неизбежно. Пробуйте margins, display:block (подобие формата таблиц), (padding нужно для отступов текста). Лучше быть последовательным в фиксировании - если width: 775px, то и в других блоках не зазорно. То, что LI перелезут на 2-ю строчку, было явно тоже не предусмотрено? :)
(Цвета фонов изменил, чтобы легче было разобраться.) | |
| |
|
|
| |
|
|
| |
для: 12345
(29.12.2005 в 21:48)
| | | Нет не предусмотрено... Как-то странно смотрю вот на скриншот, а у меня в эксплорере по другому. Может это из-за того , что padding в em'ах установлен? Мнда, будем искать...
Насчет высоты блока - помогло, но тогда теряется смысл стиля - я же не буду прописывать ее для layouta на каждой странице.
Но все равно спасибо. | |
| |
|
|
| |
|
|
| |
для: dax
(30.12.2005 в 08:56)
| | | Да, потому что у меня Verdana по умолчанию. Не все же используют трудночитаемый Times, любезно подсовываемый по умолчанию :) Поэтому надо явно указать тип шрифта. Да и то нет уверенности, что шрифт из списка обязательно найдётся на локальном компьютере.
По основному вопросу - придумайте какую-нибудь распорку рядом с relative специально для FF. Первое, что приходит в голову - простой маленький span, которому скриптом задаётся высота, равная соседнему relative (она читается по .offsetHeight) после загрузки страницы, и так для каждого блока. Но проще может быть отказаться от relative, зачем он? | |
| |
|
|
| |
|
|
| |
для: 12345
(30.12.2005 в 12:25)
| | | Не распорку, а хаки надо использовать. | |
| |
|
|
