Помощь с проблемами doctype

У меня возникли проблемы с тем, чтобы мой нижний колонтитул в нижней части страницы во всех браузерах.Помощь с проблемами doctype

I имеет следующую структуру документа:

<html> 
    <head> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <div id="header"> 
       <ul> 
        <li>home</li> 
       </ul> 
      </div> 

      <div class="expander"></div> 
     </div> 

     <div id="footer" class="expander"> 
     </div> 
    </body> 
</html>

Соответствующий CSS является:

body 
{ 
margin: 0; 
height: 100%; 
} 

#wrapper 
{ 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -116px; 
} 

.expander 
{ 
height: 116px; 
} 

#footer 
{ 
width: 100%; 
} 

#header ul 
{ 
list-style: none outside none; 
clear: both; 
margin: 0; 
} 

#header li 
{ 
margin: 0; 
margin-right: 20px; 
padding: 0; 
display: inline-block; 
height: 85px; 
padding-top: 20px; 
margin-bottom: -20px; 
}

При использовании без какого-либо дока, страница отображается, как я намерен его в Chrome и Firefox. Однако в IE8 вкладки элементов списка находятся в отдельных строках

Когда я добавляю доктрину XHTML, страница корректно отображается в IE8, за исключением того, что нижний колонтитул не отображается внизу страницы в IE8, Chrome или Firefox, т.е. нижний колонтитул находится непосредственно под строкой меню.

Пример доктайп:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Что я делаю неправильно?

источник

2011-01-12 James

Мне непонятно, чего вы пытаетесь достичь. Возможно, вам следует предоставить более подробную информацию. –

Используйте липкий нижний колонтитул, чтобы иметь нижний колонтитул внизу страницы. http://ryanfait.com/sticky-footer/ – Marwelln

Первое непосредственное наблюдение, которое не решит проблему. Вы неправильный тип. Это для сайтов, которые служат только для XML, но я сомневаюсь, что вы это делаете. Измените его на версию XHTML1. – Rob

Тестирование с DOCTYPE в коде:

Изменение:

body 
{ 
margin: 0; 
height: 100%; 
}

к:

html, body 
{ 
margin: 0; 
height: 100%; 
}

фиксирует это для меня.

источник

2011-01-12 13:19:55 thirtydot

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

body, html{ 
    margin:0; 
    height:100%; 
} 

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

Примечание: это решение, как полагает, чтобы избежать уловок высоты обертки/проблем

источник

2011-01-12 13:21:35 stecb

В дополнении к использованию неправильного доктайпа , как я упоминал выше, изменение или удаление доктрисов никогда не является вариантом. По сути, это набор правил, которые вы указываете браузеру, который вы используете для создания страницы. Вы не можете изменять правила в середине или по прихоти. Измените/удалите doctype, измените правила.

Никогда, НИКОГДА не используйте IE как ссылку на то, как все работает. В лучшем случае это неэффективно, это десятилетие или больше позади всех остальных в современных стандартах и соответствии. Если он работает в FF и Chrome, то ваша разметка, скорее всего, верна.

Жизнь только что позвонила, и я надеюсь позже дать дополнительную информацию.

источник

2011-01-12 13:58:27 Rob

Абсолютно верно о доктрине! Просто добавление к браузеру: большинство «нормальных» людей, к сожалению, используют IE (6 Too !!!!!). Поэтому мы, как разработчики веб-сайтов, должны слишком много тестировать на IE. – stecb

@steweb - я не сказал, что не тестирую в IE. Я сказал, что вы не можете доверять ему, чтобы что-то делать правильно, и вы не можете использовать его для справки о том, как все работает. – Rob

Я никогда не использовал IE в качестве ссылки? Это трюк браузера. Приветствия для обратной связи.Тем не менее, я это испытал, когда я заметил эту проблему. – James

Помощь с проблемами doctype

ответ

Смежные вопросы