Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > min-width IE

Автор: Рыжий 31.10.2008, 19:13

Пытаюсь сделать min-width в Internet Explorer (версия IE 6.0.2900)
Имеем:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #root{
                background-color:#c0c0c0;
                border:1px solid #000000;
                min-width: 300px;
                float:left;
                padding:25px;
            }
        </style>   
    </head>
  <body>
        <div id="root">
                Lorem ipsum dolor sit amet
        </div>
  </body>
</html>

Это обычный div с min-width = 300px.
Firefox ведет себя отлично - если фраза маленькая - ширина равна 300px, если фраза большая - расширяет div.
IE: если фраза большая - расширяет div но если она маленькая - сужает его (становится меньше чем 300px)

Нашел вот такой сайт: http://cssing.org.ua/2005/09/02/min-width-for-ie/ Там есть 3 варианта:

1. Первый вариант - это использование expression:

Цитата

width:expression(document.body.clientWidth < 300 ? "300px": "auto" );

Тут есть главный минус - IE прежде чем выполнить этот код спрашивает у юзера разрешение, соответственно создаем юзеру неудобства и прививаем к нему подозрение к сайту:

Цитата

Чтобы помочь обеспечению безопасности, Internet Explorer ограничил отображение активного содержимого, могущего получить доступ к компьютеру, этим файлом.

2. Второй метод работает, но он создает border, что не есть гуд. А если я хочу разместить текст посередине - на border он не вылезет (((

3. А вот третий способ, странно, но у меня не сработал smile

Вопрос остается открытым, как заставить Internet Explorer понимать min-width?? Кто какие хаки знает?

Автор: SelenIT 31.10.2008, 19:34

Цитата(Рыжий @ 31.10.2008, 19:13

)

IE прежде чем выполнить этот код спрашивает у юзера разрешение

Это только если открывать страницу как локальный файл. По http - молча выполняет (если JS не выключен, разумеется).

Цитата(Рыжий @ 31.10.2008, 19:13

)

если я хочу разместить текст посередине - на border он не вылезет (((

Можно выкрутиться через отрицательный margin. Или, на крайний случай, position: relative/absolute...

Кроме названных хаков, больше лично я, пожалуй, ничего и не знаю... Разве что таблица с распоркой smile

Автор: ksnk 31.10.2008, 20:52

Код


...
                min-width: 300px;
...
        <div id="root">
                <div style="width:300px; height:1px; overflow:hidden;"></div>
                Lorem ipsum dolor sit amet
        </div>
 ...

Вот еще вариант min-width для IE. Достаточно коряво, но, imho, прямее всяких expression и ie-хаков.

P.S. Это, вообще-то второй способ по статье, правда без дополнительных ненужных наворотов smile

Единственный минус - нужно помнить, что пиксель сверху уже занят...

Автор: webster 31.10.2008, 20:59

Можно использовать "распорку":

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #root{
                background-color:#c0c0c0;
                border:1px solid #000000;
                min-width: 300px;
                float:left;
                padding:25px;
            }
            #root .bottom_fix{
            display: block;
            font-size: 1px;
            line-height: 0px;
            height: 1px;
            margin-bottom: -1px;
            min-width: 300px;
            width: auto!important;
            width: 300px;            
            }
        </style>   
    </head>
  <body>
        <div id="root">
                Lorem ipsum dolor
        <span class="bottom_fix"></span>
        </div>
  </body>
</html>

Автор: Рыжий 31.10.2008, 21:34

Ого! То, что надо!!!

Автор: KonstRuctor 5.11.2008, 00:00

Я перепробовал несколько вариантов.
Все же остановился на width:expression.

Посмотри такой вариант решения проблемы:
http://www.musoyan.com/am/

Мне он показался очень интересным.

Автор: zjeka 16.11.2008, 00:31

Так же пользую распорку, пока никто не жаловался