Между этими двумя блочными элементами не должно быть места - PullRequest
0 голосов
/ 29 января 2010

Моя страница имеет три столбца, причем левый и правый столбцы расположены абсолютно, а в центральном столбце используется относительное расположение.Все три столбца должны быть удалены из верхней части страницы на расстояние 184 пикселя, но по какой-то причине расстояние между верхней частью страницы и центральным столбцом превышает 184 пикселя.Я понимаю, что центральный столбец все еще находится в нормальном потоке документа, но поскольку отступы и поля установлены на ноль, то заголовок и центральный столбец должны касаться друг друга.Есть идеи, что происходит?


body 
{
  padding:0px;
  margin:0px;
}

#header
{
  padding:0px;
  margin:0px;
  background-image:url(images/HeaderSlice.gif);
  background-repeat:repeat-x;
  height:184px;  
}

#centerCol
{
  position:relative;
  margin-left:200px;
  margin-right:200px; 
}


#leftCol
{
  position:absolute;
  top:184px;
  left:0px;
  width:200px; 
}

#rightCol
{
  position:absolute;
  top:184px;
  right:0px;
  width:200px;  
}

HTML-файл:

    ...
<body>
  <div id="header">...</div>
  <div id="centerCol">...</div>
    ...


thanx


РЕДАКТИРОВАТЬ:

Это работает сейчас.Внутри #centerCol у меня был еще один div (с id = ”userManagement”) и, как оказалось, верхнее поле внутреннего элемента #userManagement перекрывалось с верхним полем # centerCol

<div id="centerCol">
   <div id="userManagement">...</div>
</div>

#userManagement
{
   margin-top:16px;
   margin-left:10px; 
   font-size:12px;
}


спасибо всем за помощь

Ответы [ 2 ]

1 голос
/ 29 января 2010

а.#Header может иметь содержимое, которое вызывает переполнение, так что оно расширяется по высоте.попробуйте добавить «overflow: hidden» в элемент #header.б.Вы уверены, что для centerCol поля margin-top и padding-top установлены в 0?Ваш фрагмент не показывает это.

c.откройте страницу в Firefox с помощью FireBug и посмотрите на данные позиционирования в окне firebug.дает отличное представление о проблемах позиционирования

1 голос
/ 29 января 2010

Вы можете использовать тег класса html, чтобы избавиться от, вероятно, добавленного отступа в верхней части страницы. Это вызвано вашим конкретным браузером (Firefox?), Так как Chrome не показывает это поведение.

Это было бы:

html, body 
{
      margin:0;
      padding:0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...