Вход • Регистрация

Кроссбраузерные "резиновые" (20%, 50%, 30%) колонки

  •
  • 06 февраля 2013 г.
  • Подскажите пожалуйста как пофиксить проблему.
    В IE 5,5 и IE 6 правая колонка переодически соскакивыает вниз при изменении окна браузера.
    Смотрите скриншот.

    Код


    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

    <title></title>
    <style>
    .wrapper {width: 100%; display:block;}

    .left {width: 20%; float: left; display: inline; background: #d3e6bd; height: 200px;}

    .center {width: 50%; float: left; display: inline; background: #e6c3bd; height: 300px;}

    .right {width: 30%; float: left; display: inline; background: #d3e6bd; height: 200px;}
    </style>
    </head>

    <body>
    <div class="wrapper">
    <div class="left">
    left
    </div>

    <div class="center">
    center
    </div>

    <div class="right">
    right
    </div>
    </div>
    </body>
    </html>

  • 06 февраля 2013 г.
  • В 6 осле появляется недокументированный padding который распространяется наружу. Тестировать мне негде, но на словах скажу как решаю обычно:
    1) уменьшаю ширину некоторых колонок на процент и опытным путем добиваюсь нужного результата
    2) использую вместо padding marging, тогда ошибки уменьшаются.
    •
    • 06 февраля 2013 г.
    • Вопрос по 2 пункту.
      А как решается проблема того, что соседние маргины друг на друга наезжают, до того как не упрутся в Бордер.
      •
      • 06 февраля 2013 г.
      • марджин сделать только с одной стороны например
        •
        • 06 февраля 2013 г.
        • В последнее время склоняюсь к тому что отступы должны быть одинаковы со всех сторон. Потому как много головняков потом в процессе получается там забыл тут 2 потом незнаешь как это всё в кучу собрать.
  •
  • 06 февраля 2013 г.
  • Точнее сказать padding расширяет сам элемент на эту ширину.
    •
    • 06 февраля 2013 г.
    • Андрей, так у меня нет вообще паддинга в колонках. Точнее сказать, у меня паддинг = 0.
      Тут дело вовсе не в паддинге. Ведь слом просисходит частично - когда ресазим браузер.


      Я использую reset от Майера:

      Код
      /* http://meyerweb.com/eric/tools/css/reset/
      v2.0 | 20110126
      License: none (public domain)
      */

      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed,
      figure, figcaption, footer, header, hgroup,
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      }
      /* HTML5 display-role reset for older browsers */
      article, aside, details, figcaption, figure,
      footer, header, hgroup, menu, nav, section {
      display: block;
      }
      body {
      line-height: 1;
      }
      ol, ul {
      list-style: none;
      }
      blockquote, q {
      quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
      content: '';
      content: none;
      }
      table {
      border-collapse: collapse;
      border-spacing: 0;
      }
  •
  • 06 февраля 2013 г.
  • В общем вроде решид проблемму.
    Путём изменения ширины правой колонки с 30% на 29.9%.
  •
  • 06 февраля 2013 г.
  • А разве стоит ориентироваться на пользователей с IE 5,5 IE 6? Вроде как время идет вперед. Стоит смотреть в сторону отображения по следующей цепочке: экран,планшет,смартфон. Ресайз от размера экрана. Css фреймворк на grid основе зачет.
    • 07 февраля 2013 г.
    • Конечно стоит делать сайт максимально правильно отображающимся даже в IE 5.5.
      Ведь сайт делается для людей, а не для самого себя.
      Собственно вопрос-то совсем у меня был простой и касался элементарного layout.
      •
      • 07 февраля 2013 г.
      • О нет, по данным статистики li.ru за январь 2013 IE 5 используют аж 2874 человека. С 6-ым дела получше 296910, в процентах 0,3 от общего числа пользователей рунета. Под них действительно стоит делать сайты.
        •
        • 07 февраля 2013 г.
        • Таких товарищей даже гиганты прессуют Googl, Yandex, Вконтакте.
          А я чё рыжий штоли - я с ними тоже воюю, правда жёще вплоть до IE8.
          Если скурпулёзно соблюдать совместимость с IE8, 7, 6, 5. То распухнут HTML и CSS что естесственно повлёчёт временные затраты и соответственно цена такого сайта тоже вполне логично должна стоить на порядок дороже. Стоит ли увеличивать бюджет сайта на 25% (на это мало кто из заказчиков согласится) из за 0.3% людей застрявших во времени?
          •
          • 07 февраля 2013 г.
          • Поддерживаю. Сами пока ставим заглушки вплоть до IE7. Пусть сисадмины в организациях работать начинают и обновления ставят. Не представляете, сколько кровушки у нас эти "динозавры" попили :)
            •
            • 07 февраля 2013 г.
            • Такой глушняк жестковат конечно я просто Див сворачиваемый ложу поверх сайта. Если чел трудный и упёртый у него остаётся возможность посмотреть что нихрена его браузер не тянет и ткнуть ссылку. После чего он опять увидит этот див. Когда задолбётся его скрывать может обновит браузер :)
          •
          • 07 февраля 2013 г. , редакция: 07 февраля 2013 г.
          • Есть компании, в которых запрещена установка иных программ, кроме тех которые уже были установлены несколько лет назад и прекрасно работают. Иногда такая политика проводится админами, чтобы крепче спать.
            Но самое интересное, что в таких компаниях часто работают люди с весьма солидными потребительскими возможностями.
            А если сайт рассчитан на рынок B2B, то проценты среди пользователей могут выглядеть иначе...
            Самое правильное, посмотреть на статистику своего сайта.
            Добавлено: с Евгением почти в унисон написали.
            •
            • 07 февраля 2013 г.
            • По статистике наших сайтов так и есть меньше 1% пользователей с IE8, 7, 6.
              Неправильный подход админов - в целях безопасности они должны в таком случае самы обновлять дырявое ПО. Просто это маленькие конторы информация которых не представляет никакой или почти никакой ценности.
              Если серьёзно взятся за них и подолбать их ПО позаражать поубивать файловые системы. То думаю что взгляды у таких нерадивых админов поменяются. Ато привыкли нихрена не делать.
              •
              • 08 февраля 2013 г.
              • Поубивать не поможет.
                Подход примерно следующий: после установки на компьютер всех необходимых программ, сохраняется образ диска. Т.к. все рабочие файлы и данные на центральных серверах, то в случае заражения или убивание файловой системы на этих рабочих станциях - просто восстанавливаем из образа и оп-ля! - 10 мин. работы и компьютер как новый. И так долгие, долгие годы...
                А потом, далеко не все жаждут каких-то изменений в своей работе.
                Вот представьте: Вам нужно делать сайты (в срок!), а приходит сис. админ и говорит
                - Появился новый стандарт HTML8, под него вышла новая супер программа с навороченным круговым интерфейсом и новой системой команд! Поэтому я на всех ваших компьютерах установил ее ВЗАМЕН ваших старых морально устаревших программ. Удачи вам в работе!
                Кстати, вас искал клиент, которому завтра сдавать работу. Кажется, там оставалось не много доделать...
        •
        • 07 февраля 2013 г. , редакция: 07 февраля 2013 г.
        • Азат, всё зависит от того, для кого делаем сайт. Если он ориентирован на массового пользователя, то это одна сторона дела и действительно можно забить на старые браузеры и ориентироваться на процент.

          Но не всё меряется процентами. Сайты бывают разные и аудитория разная. Поверь, даже ради ОДНОГО пользователя стоит сделать сайт так, чтобы он правильно отображался в старых браузерах. Только ради одного клиента! Есть такие бизнесы. И люди есть специфические, например миллионер, имеет самолёт и прочие дорогие вещи, но на его руке красуются пластиковые часы Montana копеечной стоимости и плевал он на все другие часы. Ему эти часы очень дороги (о причинах не будем говорить)!

          Есть очень богатые люди, которые пользуются старыми вещами (по разным причинам), в том числе и старыми браузерами, и нужно подстраиваться под таких людей, если они являются потенциальными заказчиками/клиентами. Предположим, что ты, Азат, являешься владельцем серьёзной юридической компании. Один хороший клиент может принести тебе миллион рублей прибыли. А клиент этот в общем-то образованный, умный человек, но уже в возрасте и поэтому возможно консервативен - дома у него стоит компьютер купленный в 2000 году и браузер у него тоже старый.

          Я таких людей знаю, видел. Один мой бывший клиент - владелец ювелирного магазина в Нью-Йорке и Москве - имеет сайт сделанный в 2001 году, до сих пор сайт такой с тех пор, только номер телефона я ему менял и кое-что подправил. И он гордится своим сайтом и плевал он на новый!
          •
          • 07 февраля 2013 г.
          • Ну и зря, чисто из маркединговых соображений. Редизайн нужно делать каждые 2-3 года а ребрендинг 5-7 лет. Люди очень падки на всё новое и красивое. А унылое старое уже никому не интересно.
            Мог бы зарабатывать больше, уверен на 100%.
            •
            • 07 февраля 2013 г. , редакция: 07 февраля 2013 г.
            • Денис, я согласен, что с новым дизайном у него скорее всего лучше пошли бы дела.
              Но! Они и так вроде идут хорошо, торгует бриллиантами (я серьёзно) имея свой магазин в столице США.
              Все мы можем теоретически стать миллионерами и миллиардерами, но ведь не становимся!

          • 08 февраля 2013 г.
          • Вам честно сказать? Я этого не понимаю. Я не могу представить что человек сидит на одном сайте, который верстали под его браузер. Есть другая куча сайтов, которые тупо не оптимизированы под ie6,7. И знаете, я считаю что человек должен идти в ногу с прогрессом, а не тупо сидеть в 2000. Я бы на вашем месте для них организовал курсы повышения компьютерной грамотности. Того гляди и сайты перестали бы делать.
            И не нужно делать акцент на очень богатых людях, они такие же люди как и мы. Просто богаче нас, вот и все. Удачи Вам.
            <offtop>И не нужно переходить на ты, когда собеседник с вами на вы.</offtop>
            •
            • 08 февраля 2013 г. , редакция: 08 февраля 2013 г.
            • Азат, я говорю ТЫ или ВЫ, когда мне хочется и когда мне нужно.
              Если ты ко мне на ВЫ, то это твоё личное дело.
              Но вот не кажется ли тебе, что ты агрессивно себя ведёшь когда типа как указываешь мне что и как мне нужно делать? Ты говоришь мне: "И не нужно". Я же не говорю, ЧТО тебе нужно и чего не нужно!

              В бизнесе, при зарабатывании денег, только и делается акцент на том, чтобы их заработать. Если эти деньги принесёт один богатый консервативный человек с Ослом 5.5, то только и нужно на этом человеке концентрироваться. Это бизнес! Не важно чем он там пользуется, это его личное дело и не нам учить его и указывать чем он должен пользоваться. Да и как ты можешь кому-то об этом сказать, если человек об этом даже и не подозревает! Сидит себе в кабинете и заходит на твой сайт - а твой сайт весь кривой и нечитабельный на его экране. А потом он заходит на сайт твоего конкурента и там всё качественно сделано и показывается хорошо на его экране.

              Ты не можешь учить и образоввывать своих потенциальных клиентов!
              Ты их в глаза не видел.
              Они могут стать твоими клиентами, только после того, как ты им понравишься.
              А как ты им можешь понравиться, если твой сайт весь кривой на их экране?
              • 08 февраля 2013 г. , редакция: 08 февраля 2013 г.
              • Так если вы их в глаза не видите, откуда у вас статистика что у них у всех поголовно ie5.5?? Пруф есть?
                Я не веду себя агрессивно, просто я не люблю когда мне тыкают. Это говорит об уровне воспитания собеседника.
              •
              • 09 февраля 2013 г.
              • Чего и следовало ожидать. Можете только пустословить и ТЫкать незнакомым вам людям. Большинство ответов на форуме от вас, это флуд. Можете не отвечать, эта тема для меня закрыта.
  •
  • 07 февраля 2013 г.
  • Многие богатые люди, слушают музыку с магнитофонных касет. А все авто продаются только с мп3 магнитолами.Значит забили на таких. Вывод: живи реальными тенденциями, купи macbook pro с ретина дисплем и установи ie 5.
    • 07 февраля 2013 г. , редакция: 07 февраля 2013 г.
    • Пётр, случаи разные бывают и люди тоже разные.
      В сфере услуг нужно подстраиваться под своего потенциального клиента/покупателя, в этом суть.

      Кстати, у Артемия Лебедева оба сайта свёрстаны таблицами, а не дивами и они нормально отображаются в старых браузерах:
      http://tema.ru/main.html
      http://www.artlebedev.ru/

      Как я понял у IE 5.5 и IE 6 имеется косяк при использовании div с процентами. Т. е. нельзя имея для трёх колонок указать например 20% 50% 30%. Нужно делать типа так, одну десятую недодавать:

      Код
      .dp5{width:5%;}
      .dp10{width:10%;*width:9.9%;}
      .dp15{width:15%;*width:14.9%;}
      .dp20{width:20%;*width:19.9%;}
      .dp25{width:25%;*width:24.9%; }
      .dp30{width:30%;*width:29.9%;}
      .dp33{width:33.33%;*width:33.3%;}
      .dp35{width:35%;*width:34.9%;}
      .dp40{width:40%;*width:39.9%;}
      .dp45{width:45%;*width:44.9%;}
      .dp50{width:50%;*width:49.9%;}
      .dp55{width:55%;*width:54.9%;}
      .dp60{width:60%;*width:59.9%;}
      .dp65{width:65%;*width:64.9%;}
      .dp67{width:66.67%;*width:66.6%;}
      .dp70{width:70%;*width:69.9%;}
      .dp75{width:75%;*width:74.9%;}
      .dp80{width:80%;*width:79.9%;}
      .dp85{width:85%;*width:84.9%;}
      .dp90{width:90%;*width:89.9%;}
      .dp95{width:95%;*width:94.9%;}
      .dp100{width:100%;*width:99.9%;}
      •
      • 07 февраля 2013 г.
      • И это не единственный косяк - вернее это не косяк а просто о части того что есть, тогда ещё даже не знали.
        И списочек того что немогут IE очень и очень велик. Если ссылку найду прикреплю позже.
        •
        • 07 февраля 2013 г.
        • Да я знаю. В своё время, в году этак 2001, 2002 я помню как мучался из за этого IE. Собственно все мучались и проклинали.
  •
  • 08 февраля 2013 г.
  • Есть люди, которые покупают компьютер с предустановленными прогами и браузером и пользуются им много лет ничего не меняя. Они даже не знают о существовании как такового понятия браузер, не говоря уж о разных марках этих браузеров. У них стоит предустановленный IE. Они даже не могут сделать элементарного - установить новый браузер! Да!

    И люди эти не какие-то неучи или нищеброды. Напротив, образованные, социально активные, среди них есть хозяева приличных компаний. Есть богатые госчиновники.

    Это мы тут в курсе разных браузеров, каких-то нюансов. А им это нахрен не нужно. У них другие дела и интересы.
  •
  • 10 февраля 2013 г. , редакция: 10 февраля 2013 г.
  • Согласен и это не исправить

    Я буду и дальше вести войну и учить, как правильно жить, пупов земли, цифровой жизнью. Это моя гражданская позиция.

    У вас своя. Мы оба считаем, что позиция предложеная вами, а вы мной в корне не правильна. Так будет всегда. Вы будете делать сайты для 0.3% населения которые скажут вам спасибо. А мы для 99.7% которые скажут спасибо нам. Вашими потенциальными клиентами станут xx% от 0.3, а нашими xx% от 99.7%. Ведь мы же не умрём с голоду, правда? Пусть будет так!

    Удачи и успехов.

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум