Используя выражения в CSS-файле для Internet Explorer 6, можно добиться поведения, которое все нормальные браузеры уже давно умеют, а именно min-width и max-width свойства для блока:
#someblock{
width:expression(((document.documentElement.clientWidth ||?
document.body.clientWidth) < 990) ? '990px' : ?
((document.body.clientWidth > 1280) ? '1280px' : '100%'));
} Данная заметка является скорее чем-то вроде self-note, но вдруг будет полезна и вам.
P.S. Не забывайте выносить стили для IE в отдельные файлы с помощью Conditional Comments и будет вам счастье :)
Upd.:
После общения с uggallery в коментариях, было решено оптимизировать скрипт так, чтобы не использовать expressions, из-за которых частенько подвисает браузер. Вот что из этого получилось:
Так как скрипт нужен нам только для IE6, выделяем его с помощью Conditional Comments. Скрипт срабатывает на двух событиях – onload и onresize, что не обязательно:
<!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent(‘onload’, mmwidth);
window.attachEvent(‘onresize’, mmwidth);
function mmwidth(){
document.getElementById(‘wrap’).style.width = ?
((document.documentElement.clientWidth || ?
document.body.clientWidth) < 990) ? ‘190px’ :?
((document.body.clientWidth > 1280) ? ‘1000px’ : ‘1000px’);
};
</script>
<![endif]--> Все что нужно сделать – это подставить id нужного вам элемента, ну и конечно значения максимальной и минимальной ширины. document.body.clientWidth соответственно тоже меняйте по вкусу.
Скрипт на оригинальность не претендует, да по большому счету от expression и не отличается, просто вынесен из CSS. Знаете как сделать лучше? Нашли ошибку? Коментируйте.
За идею спасибо uggallery, за консультацию copyhold‘у.
Только доделал макет и там тоже были проблемы с растягиванием блока по высоте. сделал так
в файле стилей указал min-height в пикселях а в самом документе поставил через условие для ие6 height тоже в пикселях… пока работает… :)
Тоже вариант, но в определенной ситуации inline-стили будут приоритетнее и за’override’ят те, которые в файле…
Все было бы хорошо, если бы не expression. Сделать бы это в виде отдельного Javascript. Лучше всего два варианта: один с getelementbyid (или как оно там); другой – для элемента body. Тогда это будет супер-решение!
[quote comment="1700"]Все было бы хорошо, если бы не expression. Сделать бы это в виде отдельного Javascript. Лучше всего два варианта: один с getelementbyid (или как оно там); другой – для элемента body. Тогда это будет супер-решение![/quote]
В принципе так оно и должно быть, как ты говоришь, но я на пример вобще не сторонник использования js как средства верстки, поэтому для меня expression является неким компромисом с совестью :))
JS тут – не средство верстки, а средство расширения функциональности IE. То есть используется, по прямому назначению, в соответствии с веб-стандартами. Экспрешн – тот же JS, только прикрученный через одно место – не в соответствии с веб-стандартами. Это ты называешь компромисом?
Не важно что лучше, важно чтобы был выбор! Потому что для меня, например, экспрешн неприемлем. Не по идеологическим причинам, а потому что он нередко роняет IE.
Поразмыслил и согласился с твоими доводами. Надо озадачиться написанием полноценного скрипта.
>озадачиться написанием полноценного скрипта.
Было бы классно! С меня – ссылка в блоге и всяческий пиар :)
uggallery, готово, смотри апдейт ;)
Скрипт конечно не полноценный, но требованиям соответствует.
Ребята, спасибо за оба решения. Первый вариант уже использовал (только немного по-другому), в следующий раз попробую второй.
Хм. Чего-то у меня не получается заставить это работать :( Очень хочу посмотреть страницу с примером.
[quote comment="1709"]Хм. Чего-то у меня не получается заставить это работать :( Очень хочу посмотреть страницу с примером.[/quote]
Залил.
Спасибо за решение. Положу в копилочку. Вот способ чисто на CSS:
Контент.
CSS:
.outer {
padding: 0px;
margin: 0px auto;
width: 100%;
height: 100%;
text-align: left;
min-width: 680px
}
HTML .minwidth {
padding-left: 680px
}
HTML .minwidth {
height: 1px
}
HTML .layout {
height: 1px
}
HTML .container {
margin-left: -680px;
position: relative;
height: 1px;
}
Кроссбраузерно. Применяю сейчас этот метод.
Извините, html порезался. Вот такой:
<div id="outer">
<div class="minwidth">
<div class="layout">
<div class="container">
Контент
</div></div></div></div>
ifman, а живой пример есть?
http://anime.insyss.ru/Сейчас выставил в 1000px для примера.
Только не думайте, что это я придумал:) Нашел.
ifman,
такой способ тоже имеет право на существование )
neutrino: Посмотрел пример. Блок #wrap меняет размеры не плавно, а скачкообразно. Либо 700px либо 190px. Так и было задумано?
Заодно разобрался почему у меня вчера код не работал. Я копировал его со страницы, а там прямые программистские кавычки CMS-кой поменяны на одиночные типографские. Вокруг параметров onload, onresize…
uggallery, я скрипт собственно и не писал. это просто вынос expression из CSS, соответственно функционал не изменился и плавности нет. Я был бы рад ее дописать, но JS не сильная моя сторона…
Ковычки меня самого уже запарили. Чего-то я намудрил с плагинами к WP. Надо будет на выходных пофиксить.
Дык, экспрешн ведет себя точно так же. Скачет :( Мне кажется, это нельзя использовать на практике.
А то я уже стал сомневаться: может это у одного меня оно так себя ведет. Проверял и проверял на разных машинах… :)
[quote post="110"]Мне кажется, это нельзя использовать на практике.[/quote]
Ну почему нельзя? Можно. Хотя бы для того, чтобы изменять ширину блока при загрузке страницы. Кроме того, мне кажется что ресайзят окна не так часто. Жаль нет подобной статистики.
[quote post="110"]Дык, экспрешн ведет себя точно так же.[/quote]
Ну конечно так же, но теперь хоть браузер не будет рушить.
Подвисает IE из-за некорректных значений в expression, чаще всего это связано с режимом отображения. Для режима QuirksMode, который работает в IE5.5, 5 а так же в IE6 (при условии неправильно указанного или вообще не указанного DTD, либо если перед DTD идёт XML декларация). Определить режим отображения можно следующим образом: document.compatMode && document.compatMode == ‘CSS1Compat’, всю конструкцию можно разделить на две части, для режима совместимости со стандартами и для quirksmode, в первой используется document.documentElement, а во второй document.body (именно эти объекты в разных режимах представляют собой основую канву документа).
Q-Zma, вот мы как раз и говорим о том, чтобы expressions не использовать.
[quote comment="1730"]Q-Zma, вот мы как раз и говорим о том, чтобы expressions не использовать.[/quote]
Если их использовать правильно, с пониманием почему оно зависает, то они зависать не будут. Использую их регулярно и повсеместно, проблем не наблюдаю.
По поводу точки зрения
не могу согласиться… Львиная доля рынка браузеров за IE, тут уже хочешь или не хочешь, но использовать технологии MS придётся по любому, тем более они всё сделали для того, чтобы кривые решения для IE можно было безболезненно замаскировать таким образом, чтобы их воспринимал только IE. По поводу падания IE благодаря expression смотри выше.
Q-Zma, как бы ты исправил expression, описаный в посте?
[quote comment="1734"]Q-Zma, как бы ты исправил expression, описаный в посте?[/quote]
зависит от ситуации, покажите мне пример страницы, где этот код вызывает зависание.
[quote post="110"]не могу согласиться… Львиная доля рынка браузеров за IE, тут уже хочешь или не хочешь, но использовать технологии MS придётся по любому, [/quote]Ради IE и стараемся. Выбор только с спобособах реализации. [quote post="110"]чтобы кривые решения для IE можно было безболезненно замаскировать таким образом, чтобы их воспринимал только IE.[/quote]Благодаря conditional comments только IE этот скрипт и получит.[quote post="110"]По поводу падания IE благодаря expression смотри выше.[/quote]Ага. Только я там ничего не понял. Зачем определять режим отображения? Он уже известен и это XHTML-strict.
[quote comment="1731"]Если их использовать правильно, с пониманием почему оно зависает, то они зависать не будут. Использую их регулярно и повсеместно, проблем не наблюдаю.[/quote]Если бы все все понимали, то и вопросов бы не было.
Пример реализации min-width и max-width для IE6 одновременно можно посмотреть? Спрашиваю не ради праздного любопытства.
[quote comment="1736"]Ага. Только я там ничего не понял. Зачем определять режим отображения? Он уже известен и это XHTML-strict.[/quote]
к сожалению не всё так просто, предлагаю ознакомится: http://hsivonen.iki.fi/doctype/
[quote comment="1736"]Пример реализации min-width и max-width для IE6 одновременно можно посмотреть? Спрашиваю не ради праздного любопытства.[/quote]
пожалуйста, смотрите
У меня все сайты с резиной, через этот expression работают. Если правильно указывать параметры, то IE не роняется.
[quote post="110"]к сожалению не всё так просто, предлагаю ознакомится: http://hsivonen.iki.fi/doctype//quote
Это что, шутка? Uggallery подразумевает то что в документе выставлен DOCTYPE, а именно XHTML-strict. Любой уважающий себя front-end developer начинает с DOCTYPE…
За пример спасибо – потестирую.
Максим Покровский,
На твой взгляд в еxpression описаном здесь есть неверно указанные параметры?
Самый первый? Нет, там все верно. IE падает если параметры указаны приблизительно так:
document.body.clientWidth
Но это уже извини не эмуляция min-width, а банальний resize, через expression, в зависимости от выбранного разрешения, что тоже лечится
document.documentElement.clientWidth
Максим, так вот первый expression мне обрушивает браузер через раз. Собственно поэтому я согласился с Uggallery и перенес его в JS.
Обрезалось :)
Попробую еще…
Самый первый? Нет, там все верно. IE падает если параметры указаны приблизительно так:
document.body.clientWidth) < 990) ? '2000px'Но это уже извини не эмуляция min-width, а банальний resize, через expression, в зависимости от выбранного разрешения, что тоже лечится
document.documentElement.clientWidth) < 990) ? '2000px'[quote comment="1742"]Максим, так вот первый expression мне обрушивает браузер через раз. Собственно поэтому я согласился с Uggallery и перенес его в JS.[/quote]
Скорее всего ты не обнулил padding и margin у body. Если нет, то я с любопытсвом бы посмотрел на конкретный пример.
Q-Zma: Похоже, это сомое оно. То что нужно. Спасибо!
Учитывая, что все так хорошо отзываются о надежности экспрешн, без отдельного скрипта можно пожить еще немного :) Потестирую конечно, но надеюсь все будет хорошо.
Жаль что подобное решение не выдяется в гуглояндексе по первому же приблизительному запросу. Нужная вещь.
А почему бы просто не использовать
document.documentElementвместоdocument.bodyifman, спасибо за пример!
Более оригинально способа я еще не видел )
[quote comment="1746"]А почему бы просто не использовать
document.documentElementвместоdocument.body[/quote]потому что в IE5.5 и IE5 такого объекта нету, учите матчасть
[quote comment="1739"][quote post="110"]к сожалению не всё так просто, предлагаю ознакомится: http://hsivonen.iki.fi/doctype//quote
Это что, шутка? Uggallery подразумевает то что в документе выставлен DOCTYPE, а именно XHTML-strict. Любой уважающий себя front-end developer начинает с DOCTYPE…
За пример спасибо – потестирую.[/quote]
уважаемый, можно не так пафосно? совершенно очевидно, что я имел ввиду, что некоторым браузерам, не буду называть производителя, совершенно чихать какой доктайп там у вас прописан… это решение работает везде, даже в браузерах неуказанного выше производителя версий 5 и 5.5, и, заметьте, не вешает его вне зависимости от версии.
Q-Zma, никакого пафоса, просто я на пример предпочитаю сначала выяснить что знает оппонент о вопросе, а потом уж предлагаю ознакомиться. По сему, мне показалось что пафос проскользнул в вашем комментарии.
В любом случае, если мои слова вас задели – прошу прощения, и в мыслях не было. Спасибо за работающий пример, добавлю его в текст поста.
[quote comment="1747"]ifman, спасибо за пример!
Более оригинально способа я еще не видел )[/quote]
Пожалуйста. Сам был поражен, когда увидел.
К комментарию № 12
Без JS и expression, одновременно и max-width и min-width
max-width и min-width в IE6. Решить за 60 секунд
Ммм.. Можно поподробнее, чем не устраивает способ:
.myclass {
min-width: 200px;
}
* html .myclass {
width: 200px;
}
Зачем эти ужасные expressions? Может я чего-то не понимаю?
Догнал, я немного о другом говорил, можно не отвечать ;)
ISpy, я так и подумал :)
2 gordi: ваше решение не универсальное, если на фоне не однородный цвет, а картинка, к примеру, ваша методика не катит
не знал про такой вариант. Вообще IE6 и некоторые релизы 8-ой оперы просто бесили – делаешь разметку, верстку, все CSS Compliant верно, правильно, в последних версиях браузеров отображается прекрасно, включая IE7 и Оперу 9.х, Мозиллу, а у пользователей старые браузеры, где в итоге всё скачет.
Вариант со скриптами интереснее, не знал, что в стиле можно использовать скрипты, буду думать куда можно еще прикрепить.
А вот вариант без скриптов всё-таки наверно правильней, например у пользователя может быть отключен js в настройках
Привет
У меня что то не получается
вложить в контенер вот мой код html\
Проба
11
left
center
right
вот css
#cont {
max-width: 900px;
min-width: 600px;
text-align: center;
border: 1px solid #FF7788;
}
div.left {
float: left;
text-align: center;
width: 18%;
margin: 1px;
color: #FFFFFF;
background-color: green;
border: solid 1px #CC3399;
}
div.center {
float: left;
text-align: center;
width: 60%;
margin: 1px;
background-color: red;
border: solid 1px #CC3399;
}
div.right {
float: left;
text-align: center;
width: 18%;
margin: 1px;
color: #FFFFFF;
background-color: blue;
border: solid 1px #CC3399;
}
что у меня здесь не правильно
@Михаил,
Вы подробнее опишите вашу проблему, а html оборачивайте в <pre><code> и пишите через lt gt