ie -проблема с position: absolute

Тема в разделе "Другие языки", создана пользователем sunyang, 3 июл 2011.

Модераторы: Цукер
  1. sunyang

    sunyang

    Регистр.:
    25 апр 2009
    Сообщения:
    444
    Симпатии:
    30
    Просто возненавидел этот ужас 21 века - IE!))

    Пытаюсь спозиционировать дивку с картинкой вниз страницы. На опере и на мозиле все как надо - дивка помещается именно вниз страницы, а в этом IE она позиционируется внизу окна, а не страницы.

    Как исправить этот косяк для чудо-броузера?

    HTML код:
    HTML:
    
    ...
    <footer>
    <div class="bottomimg"></div>
    </footer>
    
    </body>
    </html>
    
    Css:
    Код:
    footer{
    	height:165px;
    	position:relative;
    	border-top:1px solid #c8c8c8;
    	background-color:white;
    	padding-top:20px
    }
    .bottomimg{
    	position:absolute;
    	width:294px;
    	height:277px;
    	background:url(../images/reals.jpg) 0 0 no-repeat;
    	left:40px;
    	bottom:-1px
    }
    
     
  2. kos1986

    kos1986 Постоялец

    Регистр.:
    29 окт 2007
    Сообщения:
    118
    Симпатии:
    61
    Какая версия IE?
    А пометили ли вы для <footer> свойство display:block ? HTML5 тэг используете.
    Замените <footer> на div id=footer и все будет работать.
    А высота вложенного блока больше высоты внешнего.
     
  3. dixi

    dixi

    Регистр.:
    15 июн 2011
    Сообщения:
    199
    Симпатии:
    51
    http://it.toolbox.com/blogs/css-asylum/the-ie6-absolute-positioning-bug-15285

    вообще в зависимости от версии браузера надо искать хаки.
     
  4. frantz1488

    frantz1488

    Регистр.:
    21 мар 2010
    Сообщения:
    162
    Симпатии:
    43
    Попробуй так:
    HTML:
    
    ...
    <!--[if IE]>
    <style type="text/css">
    .bottomimg{
    	position:fixed;left:40px;bottom:-1px;
    	width:294px;
    	height:277px;
    	background:url(../images/reals.jpg) 0 0 no-repeat;
    }
    </style>
    <![endif]-->
    <footer>
    <div class="bottomimg"></div>
    </footer>
    </body>
    </html>