Xpoint
   [напомнить пароль]

Проблема с позиционированием футера в IE7

Метки: [без меток]
2007-08-17 10:46:41 [обр] Антон(0/3)[досье]

Обычно прикреплял футер к нижнему краю страницы приблизительно таким вот способом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
html,body {height:100%; margin:0; padding:0}
#main {width:100%;  height:100%; margin-bottom:-20px; background-color:#CCC;}
#footer {width:100%; height:20px; background-color:#FF9}
</style>
</head>

<body>
<div id="main">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">footer content</div>
</body>
</html>

В IE7, если контент выходит за пределы страницы, семерка лепит футер поверх него в нижней части экрана. Причем если вообще убрать DOCTYPE - проблема исчезает, при установке любого DOCTYPE - появляется снова. Убирать DOCTYPE рука как-то не поднимается (тем более, что трабл только в семерке). Может кто-нибудь наставить на путь истинный?

спустя 15 минут [обр] Lynn «Кофеман»(37/571)[досье]

Антон[досье]
Вообще-то такой глюк будет и в Firefox и Opera.

Footer at bottom

спустя 30 минут [обр] Евгений Петров(76/1055)[досье]
<style type="text/css">
#main{min-height:100%;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#main{height:100%;}
</style>
<![endif]-->
спустя 9 минут [обр] Антон(0/3)[досье]

Lynn «Кофеман»[досье]
Вынужден попросить прощения (перестарался с упрощением примера), на самом деле ситуация выглядит так, а тот пример действительно глючит и в фоксе и в опере:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>test</title>
<style>
html,body{height:100%;}
#content{width:100%;float:right;}
#main {height:100%; margin-bottom:-55px;}
#ft {width:100%;}
#clear{height:55px;clear:both;}
#ft {clear:both; height:55px; background-color:#ff9;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></head>
<body>
<div id="main">
         <div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
      </div>
    <div id="clear"></div>
</div>
<div id="ft">footer content</div>
</body>
</html>

Евгений Петров[досье]
спасибо большое, помогло :)

Powered by POEM™ Engine Copyright © 2002-2005