Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Не работает margin-right в IE


Автор: Eltimo 29.6.2008, 18:12
Див позиционируется абсолютно по центру , слева и справа блоки. Центральный блок должен тянутся по ширине , но нужны отступы слева и справа для блоков. Слева все нормально , но справа центральный блок залазит непонятно куда. Вот пример кода и скрин в ИЕ( в опере и фф все нормально)
Код

<div id="content"><p>Текст </p>
    
    <table border="1">
    <tr><td bgcolor="#FFCC99" width="30%">
    <p>Контакты</p></td><td><div id="contact2">Адрес:  <br />
    Телефон:  <br />
    E-mail: </div></td></tr></table>
    <div id="button"><input type="button" value="Забронировать номер" /></div> 
    </div>
    
<div id="header">HEADER</div>

<div id="main">
    <div id="leftmenu"><p>Текст </p>
            </div>
    <div id="rightmenu"><img src="pic1.jpg" width="200" height="260" /><img src="pic2.jpg" width="200" height="303" /></div>

Код

#leftmenu {
float:left;
width:240px;
margin:0;
}
#content {
    position:absolute;
    top:105px;
    margin-left:243px;
    margin-right:243px;
    padding:10px;    
}

#rightmenu {
float:right;
width:240px;
}

Автор: webster 29.6.2008, 19:21
Вот эти значения отступов:
Код

    margin-left:243px;
    margin-right:243px;
у вас "увеличивают" размеры контейнера #content(а точнее плюсуются к 100%-ной ширине этого контейнера). Одна из возможностей избежать подобного в IE - использовать padding:
Код

padding: 0px 253px;

Автор: Eltimo 29.6.2008, 20:37
В таком случае в опере и фф получаются пробелы в половину экрана

Автор: webster 29.6.2008, 21:00
Во-первых, можно использовать хаки для IE, а во вторых, можно сделать ваш макет по http://www.dynamicdrive.com/style/layouts/category/C10/ 

Автор: Eltimo 29.6.2008, 23:56
Спасибоsmile Привел все к более менее рабочему виду. Хаков правда не нашел(

Автор: bars80080 30.6.2008, 09:15
простейший хак для ИЕ:
* html ...

Код

p { padding: 5px; } /* действует для всех */
* html p { padding: 10px; } /* действует только для ИЕ */



Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)