Разрушение вызова JavaScript в Firefox

Question

У меня есть страница со структурой:

<div id="container">
   <div id="header">top menu</div>
   <div id="content">content</div>
   <div id ="footer" align="center">
       <div class="left">left part of footer menu</div>
       <div class="right">right part of footer menu</div> 
   </div> 
</div> 

Css стиль:

#container {
    position:relative;
    height:auto !important;
    height:100%;
    min-height:100%;
}

#content {
padding:0em 0em 12em;
}

#footer {
    position:absolute;
    width:100%;
    bottom:0; 
}

.left {
    float: left;
}

.right {
    float: right;
}

Это прекрасно работает во всех браузерах. Но когда я добавляю

<script type="text/javascript"></script>

внутри

<div class="left">

в FireFox (только) часть нижнего колонтитула после того, как скрипт поднялся наверх - между заголовком и содержимым div. Что с ним не так?

UPD Это все о неправильной наценке внутри #content. И только FireFox не понял, когда я пропустил один из тегов закрытых таблиц :) Спасибо, ребята, вы помогли мне разобраться.

Answer 1

#footer имеет абсолютную позицию и находится внутри относительно позиционированного div #container, так что я ожидаю этого.Может быть, попробуйте сделать контейнер Absolutley позиционированным.

Также я думаю, что ваша разметка не то, что вы хотели.Слишком много открывающих тегов div.

Answer 2

Вы можете попробовать CSS другим способом с абсолютным позиционированием.Я стараюсь избегать float, так как может привести к неожиданным проблемам с рендерингом.См. этот jsFiddle для альтернативного подхода.Работаю в IE6, Chrome12 и FF3.6 и FF4 для меня.

Answer 3

Поскольку позиция # нижнего колонтитула является абсолютной, с нижним 0 она будет расположена относительно своего первого (не статически позиционированного) родителя, который является #container. По сути, то, что здесь происходит, заключается в том, что #container становится намного ниже и перетаскивает #footer вместе с ним.

Это происходит потому, что у вас есть две height: настройки в css для #container (каким-то образом тег сценария вызывает его обновление), поэтому поведение будет неопределенным.

Если вы пытаетесь привязать нижний колонтитул к нижней части окна, в том числе при изменении его размера, я бы посоветовал иметь функцию javascript для его обработки, вызванную событием изменения размера окна (это довольно просто, см. этот вопрос о событии изменения размера окна javascript

Answer 4

измените высоту #контейнера с авто на 100% и удалите лишние строки для высоты.Авто портит вычисления, поскольку оно переопределяет 100% строк из-за значения! Important