[css2] блочная разметка

Ales · 19.07.2005, 17:23

Имеется нехитрый код.

Проблема:
В Опере и лисице выглядит "правильно".
В ИЕ наоборот, совсем не так, как должен.
(скрины ниже)

Вопрос:
Что нужно добавить/убрать чтобы ИЕ стал послушным.
Мой опыт подгонки сайтов под браузеры подсказывает мне что я не в курсе чего-то важного в плане CSS2. Вообще как ИЕ работает с блочным форматированием?

Странности:
Под дримвейвером код выглядит так же как и под ИЕ. Чему верить?

Если у вас есть нормальный рабочий css с блочным форматированием, правильно работающий под разными версиями браузеров буду признателен получить вместо ответа

Сенкс.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>
  <HEAD>
    <TITLE>A frame document with CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } 
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        background-color:#33FF66;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
        background-color:#CCCCCC;
      }
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
        background-color:#33CCdd;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        background-color:#FF6666;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="header"> 222  </DIV>
    <DIV id="sidebar"> 333  </DIV>
    <DIV id="main"> 444  </DIV>
    <DIV id="footer">555  </DIV>
  </BODY>
</HTML>

Fallen Angel · 19.07.2005, 17:42

Посмотри здесь
С css возникаем много проблем, может получится подобрать что-нить оптимальное, а вообше пользуйся dreamweawer он подскажет из-за чего ошибки в браузерах...

ninja_127 · 19.07.2005, 20:31

Цитата:

Сообщение от Fallen Angel

Посмотри здесь
С css возникаем много проблем, может получится подобрать что-нить оптимальное, а вообше пользуйся dreamweawer он подскажет из-за чего ошибки в браузерах...

Нужно уметь верстать правильно (это решается простым прочтением специальной литературы), а dreamweaver - обычный wysiwyg. Лучше для отладки использовать Mozilla Firefox extension'ы: например сочетание Tidy html validator + Web developer. А для верстки - что-нибудь более профессиональное, по-вкусу.

KidsKilla · 19.07.2005, 20:39

HomeSite fareva! =)

ninja_127 · 19.07.2005, 20:41

Цитата:

Сообщение от KidsKilla

HomeSite fareva! =)

front page only

KidsKilla · 20.07.2005, 05:12

первый раз када я познакомияля с fp он страааааашно мусорил. гадил где ни попадя. с тех пор его, как и почти всё мелкое и мягкое люто не люблю =)

KidsKilla · 19.07.2005, 17:46

есть такой =)
http://www.webmascon.com/topics/coding/43a.asp

флэшер? =)))
коль так могу помочь

кстати, дрим берёт просто модуль от ие. по этому то что в дрим на 100% и в ие.

ninja_127 · 20.07.2005, 11:37

Цитата:

Сообщение от Ales

Если у вас есть нормальный рабочий css с блочным форматированием, правильно работающий под разными версиями браузеров буду признателен получить вместо ответа

http://www.inzhstroy.ru
http://product-invest.ru
http://ecology-21.ru

Ales · 20.07.2005, 12:14

Спасибо всем! Инфы стало больше, читать будем дольше =)

Мой код был взят из спецификации по CSS. То, что он не работал в ИЕ меня как-то даже не удивило...

Цитата:

кстати, дрим берёт просто модуль от ие. по этому то что в дрим на 100% и в ие.

Давно это подозревал

KidsKilla, он самый

ninja_127 · 20.07.2005, 12:21

Цитата:

Сообщение от Ales

Спасибо всем! Инфы стало больше, читать будем дольше =)
Мой код был взят из спецификации по CSS. То, что он не работал в ИЕ меня как-то даже не удивило...
Давно это подозревал

KidsKilla, он самый

Самая гадость в кроссбраузерности - это переключить мазилловскую блочную модель, которая расширяет блок за счет паддингов, на эксплореровскую, которая сужает поля контента за счет паддинга.
Делается это строчкой:
div {box-sizing: border-box; -moz-box-sizing: border-box}
Она не проходит валидатор w3c (т.к. использует только мазиллловские элементы), однако очень хороша.