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


Автор: begin 2.8.2009, 13:38
В таблице стилей описал вот такой див:
Код

div.main
{text-align:center; vertical-align:top; margin:0px; padding:0px; margin-bottom:10px; margin-top:10px;}

Итог:
1. нижний отступ игнорируется в IE
2. выравнивание по центру игнорируется во всех браузерах, и приходится использовать тег <center>

 smile 

Автор: blah 2.8.2009, 14:02
Цитата(begin @  2.8.2009,  11:38 Найти цитируемый пост)
нижний отступ игнорируется в IE

Если .main лежит первым в body, то такая проблема будет, юзайте padding, если возможно.
Цитата(begin @  2.8.2009,  11:38 Найти цитируемый пост)
выравнивание по центру игнорируется во всех браузерах

Не может быть. Можно полную структуру представить?

Автор: begin 2.8.2009, 14:14
Попробовал вложить все в другой див с нулевыми отступами, чтобы нужный мне див был "не первым" - не помогло  smile На выравнивание это тоже не произвело эффекта.

Код

<!doctype html public '-//W3C//DTD HTML 4.01 Transitional//EN' 'www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<style>
div.page
{margin:0px; padding:0px;}
div.main
{text-align:center; vertical-align:top; margin:0px; padding:0px; margin-bottom:10px; margin-top:10px;}
</style>
</head>
<body>
<div class='page'>
<div class='main'>
<table width='950' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td align='left' valign='top'>
контент
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Автор: blah 2.8.2009, 14:23
Код

<!doctype html public '-//W3C//DTD HTML 4.01 Transitional//EN' 'www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
    <title></title>
    <style type="text/css">
    body{margin:0;}
    div.page{
        width:100%;
        overflow:hidden;
        }
    div.main{
        text-align:center;
        margin:10px 0;
    }
    </style>
</head>
    <body>
        <div class='page'>
            <div class='main'>
                <table align="center" width='950' cellpadding='0' cellspacing='0' border='0'>
                <tr>
                <td align='left' valign='top'>
                контент
                </td>
                </tr>
                </table>
            </div>
        </div>
    </body>
</html>


Добавлено через 1 минуту и 4 секунды
Код

text-align:center;
 И не должен работать тут

Автор: begin 2.8.2009, 14:35
Цитата(blah @ 2.8.2009,  14:23)
Код

text-align:center;
 И не должен работать тут

А почему?

Автор: blah 2.8.2009, 16:08
Код

text-align:center;

Используется для выравнивания чего? Правильно. Текста=)
Дальше продолжать?

Автор: begin 2.8.2009, 16:35
Но ведь картинки таким образом можно же выравнивать. А таблицы видимо нет. Чтож, обойдусь тегом.
А что же все таки насчет нижнего отступа?

Автор: blah 2.8.2009, 17:04
Код

div.page{width:100%;}


Добавлено через 6 минут и 15 секунд
картинки по умолчанию есть строчными, для них text-align работает, а таблицы вроде как блочные (ну почти блочные), для них он не работает(заманухи ie6 не в счет, там работает и для блоков)

Автор: WebDisaster 2.8.2009, 21:58
Цитата(begin @  2.8.2009,  13:38 Найти цитируемый пост)
выравнивание по центру игнорируется во всех браузерах, и приходится использовать тег <center>


Если Вы пишете {text-align:center;} для блочного элемента, выравнивание действует на элементы, находящиеся внутри этого блока, а не на сам блок. Принцип выравнивания самих блочных элементов совершенно другой: 

div.main {margin: 0 auto;} <- вместо "0" могут указываться другие значения, а для правого и левого margin - должно быть auto. Результат будет виден, если внешний блок по ширине больше вложенного выравниваемого.
 
Цитата(blah @  2.8.2009,  17:04 Найти цитируемый пост)
картинки по умолчанию есть строчными, 

не строчные, а замещаемые (к ним относятся те, у которых в теге параметр scr).

Автор: blah 2.8.2009, 22:14
Цитата(WebDisaster @  2.8.2009,  19:58 Найти цитируемый пост)
не строчные, а замещаемые (к ним относятся те, у которых в теге параметр scr).

img относятся к замещаемым элементам строкового уровня. В чем проблема?

Автор: WebDisaster 2.8.2009, 22:22
Цитата(blah @  2.8.2009,  22:14 Найти цитируемый пост)
относятся к замещаемым элементам строкового уровня

Тогда заодно объясните, что такое "уровень" элемента и какие ещё уровни бывают.

Потому http://www.nbuv.gov.ua/books/19/css1/4.html, например, есть ещё и такое мнение

Цитата

Замещаемые элементы могут быть как блочными, так и строчными.

Автор: blah 2.8.2009, 23:14
Цитата(WebDisaster @  2.8.2009,  20:22 Найти цитируемый пост)
Тогда заодно объясните, что такое "уровень" элемента и какие ещё уровни бывают.

Вы о них пишите и не знаете что они из себя представляют?

Цитата(WebDisaster @  2.8.2009,  20:22 Найти цитируемый пост)
Замещаемые элементы могут быть как блочными, так и строчными.

И что с того? Мы говорим об img. Или нет?

Автор: WebDisaster 3.8.2009, 09:31
Цитата(blah @  2.8.2009,  23:14 Найти цитируемый пост)
И что с того?

Ровным счётом ничего. Свойство display позволяет любой элемент делать как block, так и  inline (и даже inline-block).
Но при всём при этом замещаемый != строковый. Я просто обратил внимание на оговорку. 

Понятия "уровень элемента" в официальных рекомендациях w3c я не видел. Если проморгал - поправьте. Фраза "block-level element" в статьях обычно употребляется, чтобы сказать "элемент относится к блочным". А img к строковым не относится (хотя по "поведению" во многом на них похож).

Автор: blah 3.8.2009, 15:45
Цитата

Но при всём при этом замещаемый != строковый. Я просто обратил внимание на оговорку. 

Но в то же время тот же img относится и к empty elements (поправьте если не так), которые не требуют закрывающего тега, а из них к блочным относится только hr.
http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height есть такое: Inline replaced elements. Это то о чем я говорил.

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