Не работает overflow в ИЕ @ DeForum.ru

34 Сообщения: 1866 Зарегистрирован: 17.02.04

Код:

<div style="overflow: auto; border: 1px solid red;">
    <div style="float: left; overflow: auto;">please expand</div>
</div>

В ФФ родительский див автоматически принимает высоту в зависимости от содержимого.
А в ИЕ 6, 7 этого не происходит.

Можно как нибуть заставить ИЕ также работать как и ФФ?

оффтопик:

Заклинаниями клеар, флоат, оверфлов владею в совершенстве

Код:

<div style="overflow: auto; border: 1px solid red;">
    <div style="float: left; overflow: auto;">please expand</div>
<div style ="clear:both; overflow:hidden; height:0;"></div>
</div> 

AlexShop писал(а):

Можно как нибуть заставить ИЕ также работать как и ФФ?

Как-то сложно всё у тебя, overflow зачем-то. Я конечно понимаю вопрос топика, а без overflow никак? Глобально задача-то какая? А то опять уползу в мыслях куда-нибудь

Код:

<div style="background-color: #cccc99;padding:10px;">
<div style="background-color:#ff9900;">please expand</div>
</div>

AlexShop,

Код:

position:relative;
zoom:1;

блоку родителю.

34 Сообщения: 1866 Зарегистрирован: 17.02.04

tentoys,
Вот страница:
http://www.estoreprinting.com/new/public_html/sign-up/

Я отметил проблемные дивы бордером. В ФФ между ними есть отступы, а в ИЕ 6 нет.
Вот я и подумал что проблема в overflow.

Знаю если что то не работает в ИЕ 6, чаще всего связанно с "has layout" свойством у элементов. Буду копать в том направлении.

----
только честно, я не хочу что кто-то ломал голову над кодом.
я разбирусь как только начну упрощать код

AlexShop писал(а):

Я отметил проблемные дивы бордером. В ФФ между ними есть отступы, а в ИЕ 6 нет.
Вот я и подумал что проблема в overflow.

только честно, я не хочу что кто-то ломал голову над кодом.
я разбирусь как только начну упрощать код

Да, упростить надо бы.
Вот я посмотрел -- вопрос в наличии отступов между (1) (2) (3) и т.д.?

IE6 бордеров вокруг проблемных дивов нету (как нету и внутреннего дива и прокруткой);

IE7 бордеры есть между этими дивами отступы есть;

FF бордеры есть, отступы между дивами есть.

Чтобы были отступы между дивами -- мне думается, надо просто делать float:left, clear:right, и padding'и.
Вобще рассуждаю по шагам: overflow появляется и задаётся для появления полосы прокрутки при переполнении дива или спана определённой высоты/длины. А если высоты не заданы, то и overflow'a не может быть, раз родительский див растягивается от величины "дочки", зачем тогда этот параметр?

34 Сообщения: 1866 Зарегистрирован: 17.02.04

tentoys,
посмотрел скриншоты - ничего себе!
у меня там прокрутки появляются и блок с текстом пропадает?

ничего такого не наблюдаю у себя :confused:

--------
прокрутки я понял - у тебя размер шрифта увеличен. Исправлю.
То что текст с блоком пропал - буду разбираться.

Да, вот такая вот фигня получается. Кстати, масштабы в FF сброшены, в IE6-7 размер шрифта установлен, как средний...
Во, как пример, не оптимизировано конечно. Overflow есть, поскольку задан размер дива с текстом, по вкусу можно и texarea подставить

как-то так...

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>testing</title>
</head>
<body>
<div style="background-color:orange;width:50%;padding:10px;">
    <div style="background-color:yellow;padding:10px;clear:both;"><h1 style="margin:0px;">(1)damn!</h1>
             <div style="background-color:green;color:#fff;height:50px;overflow-y:scroll;">please expand<br />once again...<br /> and once more...</div>
      </div>

    <div style="background-color:yellow;padding:10px;clear:both;"><h1 style="margin:0px;">(2)damn!</h1>
             <div style="background-color:green;color:#fff;height:50px;overflow-y:scroll;">please expand<br />once again...<br /> and once more...</div>
      </div>
   
<div style="background-color:yellow;padding:10px;clear:both;"><h1 style="margin:0px;">(3)damn!</h1>
             <div style="background-color:green;color:#fff;height:50px;overflow-y:scroll;">please expand<br />once again...<br /> and once more...</div>
      </div>

<div style="background-color:yellow;padding:10px;clear:both;"><h1 style="margin:0px;">(4)damn!</h1>
             <div style="background-color:green;color:#fff;height:50px;overflow-y:scroll;">please expand<br />once again...<br /> and once more...</div>
      </div>
</div> 
</body>
</html>

34 Сообщения: 1866 Зарегистрирован: 17.02.04

ulitin kirill, vashurin
вот это заклинания :lol:

а главное ра-бо-та-ет!! :beer:

AlexShop, да незашто, ты просто помни что по спецификации еслиблок флочиться что он вырываеться из потока, и надо либо флочить блок родитель, либо испольщовать команду клер, остальные пассы в моем заклинании это что бы блок с клером был нулевой высоты.
Школу магии vashurinа не осваивал, поэтомупонятия не имею как это работает, но похоже на хак... А у меня типо все строго в3ц

34 Сообщения: 1866 Зарегистрирован: 17.02.04

ulitin kirill,
все верно, я помню это было хорошо написано в:

Цитата:

Энди Бадд . "Мастерская CSS. Профессиональное применение веб-стандартов"

Так кто тогда неправильно отображает: ФФ или ИЕ?

tentoys, кажется потихоньку начинаю вьезжать:
Overflow - не надо пользоваться для верстки или позиционирования (типа растягивать дивы, как в моем примере в начале топика)
Overflow - это для только для отображения скроллов либо сокрытия контента если он вылазит за пределы блока. А вылазить он может только при заданой высоте блока.

AlexShop писал(а):

кажется потихоньку начинаю вьезжать

ulitin kirill писал(а):

но похоже на хак...

почти

ulitin kirill писал(а):

А у меня типо все строго в3ц

только «хак» не нарушает спецификаций (если таковое вообще применимо к цсс), он просто использует специфику браузера при рендеринге. Так что это тоже по в3ц, как и у вас. Только в вашем случае имеем на одну ноду больше в дом-модели.
Есть еще один способ, упоминающийся здесь постоянно раз в пару месяцев, не нарушающий рекомендаций в3ц. Оч. хорошо очищает флоат внутри родителя, определяя его высоту по содержимому его чайлдов и не мешая флоатам самих родителей (если по уму конечно все реализовано).

34 Сообщения: 1866 Зарегистрирован: 17.02.04

karamba писал(а):

только «хак» не нарушает спецификаций (если таковое вообще применимо к цсс), он просто использует специфику браузера при рендеринге.

А может быть такое, что специфика браузера изменится в будущих версиях и этот метод перестанет работать?

karamba, может вы и правы, но я веду к тому что мой код хоть и тупой но работать будет несмотря ни на что, меня на само деле очень пугают всякие звездочки в цсс )))))))))))))) не на один же день делаем... А разве :after в шестом ие работает?

ulitin kirill писал(а):

А разве :after в шестом ие работает?

нет. В нем не работает никакое гененрируемое содержимое. Для этого там стоит inline-block; который в погоне за валидностью можно вынести в отдельный цсс-файл и подключать например через СС ))

karamba, ви знаете толк в извращениях :lol:

karamba писал(а):

через СС ))

Что есть СС? "Cross Copy"? :lamer:

Conditional Comments

karamba, блин. :beer:

У AlexShop, понимаю, достаточно тривиальная задача, там вроде и хаки не требуются.

ulitin kirill, так исправить файл CSS после будет проще, чем потом править несколько шаблонов HTML.
AlexShop, а вообще то лучше так:

Код:

<style type="text/css">
.child{float:left;}
.parent:after{
   content: " ";
   display: block;
   margin: 0;
   padding: 0;
   clear: both;
   visibility: hidden; 
}
</style>
 <!--[if lte IE 7]>
<style type="text/css">
.parent{position:relative;zoom:1;}
</style>
<![endif]-->
<div class="parent">
    <div class="child">please expand</div>
</div> 

vashurin, в моем случае ничего исправлять не придеться. А что такое за zoom? что оно делает

ulitin kirill, это, afaik, мелкософтовский хак, невалидный

http://msdn2.microsoft.com/en-us/library/ms535169.aspx
http://www.css3.com/css-zoom/

DeДверь
Логин:
Пароль:
	Автологин