VPF::нижний отступ у div'а - IE игнорирует

begin

Дата 2.8.2009, 13:38 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 415
Регистрация: 16.5.2007

Репутация: нет
Всего: нет

В таблице стилей описал вот такой див:

Код


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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Цитата(begin @ 2.8.2009, 11:38

)

нижний отступ игнорируется в IE

Если .main лежит первым в body, то такая проблема будет, юзайте padding, если возможно.

Цитата(begin @ 2.8.2009, 11:38

)

выравнивание по центру игнорируется во всех браузерах

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

begin

Дата 2.8.2009, 14:14 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 415
Регистрация: 16.5.2007

Репутация: нет
Всего: нет

Попробовал вложить все в другой див с нулевыми отступами, чтобы нужный мне див был "не первым" - не помогло 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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Код


<!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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 415
Регистрация: 16.5.2007

Репутация: нет
Всего: нет

Цитата(blah @ 2.8.2009, 14:23)

Код


text-align:center;

И не должен работать тут

А почему?

blah

Дата 2.8.2009, 16:08 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Код


text-align:center;

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

begin

Дата 2.8.2009, 16:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 415
Регистрация: 16.5.2007

Репутация: нет
Всего: нет

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

blah

Дата 2.8.2009, 17:04 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Код


div.page{width:100%;}

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

WebDisaster

Дата 2.8.2009, 21:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Цитата(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).

Это сообщение отредактировал(а) WebDisaster - 2.8.2009, 22:00

blah

Дата 2.8.2009, 22:14 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Цитата(WebDisaster @ 2.8.2009, 19:58

)

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

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

WebDisaster

Дата 2.8.2009, 22:22 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Цитата(blah @ 2.8.2009, 22:14

)

относятся к замещаемым элементам строкового уровня

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

Потому здесь, например, есть ещё и такое мнение

Цитата

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

Это сообщение отредактировал(а) WebDisaster - 2.8.2009, 22:27

blah

Дата 2.8.2009, 23:14 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Цитата(WebDisaster @ 2.8.2009, 20:22

)

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

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

Цитата(WebDisaster @ 2.8.2009, 20:22

)

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

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

Это сообщение отредактировал(а) blah - 2.8.2009, 23:14

WebDisaster

Дата 3.8.2009, 09:31 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Цитата(blah @ 2.8.2009, 23:14

)

И что с того?

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

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

blah

Дата 3.8.2009, 15:45 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Цитата

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

Но в то же время тот же img относится и к empty elements (поправьте если не так), которые не требуют закрывающего тега, а из них к блочным относится только hr.
Здесь есть такое: Inline replaced elements. Это то о чем я говорил.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »