<rmcreative>

RSS

Все заметки с тегами «CSS, mystuff»

Можно уточнить:

    (3)
    (1)
    (1)
  1. (1)
    (1)
  1. Перекрытие встроенных стилей во внешнем файле

    21 июля 2008

    Любопытная техника, позволяющая перекрывать (override) встроенные (inline) стили во внешних CSS-файлах.

    Перевод мой. Впервые опубликован на CSSBlast.

    Оригинал: Override Inline Styles from the Stylesheet

    Читаем

    2 комментария
  2. Подключение стиля только для Safari 3

    27 мая 2008

    Иногда, когда макет уже свёрстан, приходится вносить коррективы для некоторых отдельных браузеров. В случае IE очень помогают условные комментарии. В случае Safari обычно используются хаки.

    Но выход есть.

    <head>
      <link type="text/css" media="screen and (-webkit-min-device-pixel-ratio:0)"
      href="/css/safari.css"/>
    </head>

    В итоге получаем чёткое побраузерное разделение кода и валидные HTML и CSS.

    Опробовано на Windows-версии Safari 3.1. Если у кого есть под рукой мак — буду признателен за тестирование.

    8 комментариев
  3. Несколько советов верстальщикам

    22 мая 2008

    30 комментариев
  4. IE6. Прыгающая textarea, растянутая на 100%

    17 декабря 2007

    Когда первый раз увидел - был в шоке :)

    Итак, если потянуть textarea на 100% (надо, чтобы у нас была ещё колонка справа, что вполне типично), то IE6 начнёт сходить с ума при вводе текста. А именно потянет нашу textarea куда-то вправо.

    Фиксится это дело обрамлением textarea любым блочным элементом, например fieldset, и заданием ему width: 100%.

    Комментировать
  5. Бордюрный глюк mozilla

    12 октября 2007

    Сегодня был обнаружен занятный баг в рендеринге mozilla.

    Решается неиспользованием border-collapse: collapse;. Вместо него вполне можно обойтись в этом случае border-spacing: 0;

    Комментировать
  6. Создание отдельного стиля для Opera

    6 августа 2007

    html:first-child .myStyle{
      /*тут стили для Оперы*/
    }
    Комментировать
  7. Перекрываем select в IE6

    29 июня 2007

    Как известно, select в IE6 штука глючная и на z-index не реагирует. Из-за этого часто возникают проблемы с реализацией различных меню и подсказок. Существует мнение, что решения нет, но это не так:

    .ns{
      border: 2px solid #f00;
      position: absolute;
      left: 50px; top: 10px;
      width: 150px; height: 150px;
    }
     
    .nsframe{
      z-index: -1;
      position: absolute;
      top: 0px; left: 0px;
      width: 146px; height: 146px;
    }
    <div class="ns">
    <IFRAME class="nsframe" scrolling="no" frameborder="0"></IFRAME>
    Здесь информация Здесь
    информация Здесь информация Здесь информация
    Здесь информация Здесь информация</div>
        <select name="nameSelect">
        <option value="1">название</option>
        <option value="1">название</option>
        <option value="1">название</option>
        <option value="1">название</option>
        <option value="1">название</option>
        </select>
    4 комментария
  8. Хак подчёркивания в CSS

    28 июня 2007

    А знаете ли вы, что:

    — Подчёркивание в идентификаторах разрешено в спецификации CSS2.1.

    — Браузеры должны игнорировать неизвестные CSS-свойства.

    — IE 5 и выше для Windows игнорирует подчёркивание в начале любого свойства.

    Таким образом свойство _color:red:

    — Валидно.

    — Игнорируется всеми браузерами, кроме IE под Windows.

    — В IE работает аналогично color:red.

    Очень полезная особенность:

    #box {
       min-height: 300px;
       height: auto;
       _height: 300px;
    }

    p.s. в IE под MacOS не работает.

    Комментировать
  9. Важное замечание про подвал

    13 марта 2007

    Хочу добавить, что для использования данного метода должен стоять полный DOCTYPE:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

    с сокращённым

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

    работать не будет.

    2 комментария
  10. CSS. Спускаем подвал вниз!

    13 марта 2007

    Вполне типичная задача: сделать подвал всегда внизу. Независимо от того, есть ли содержимое на странице или нет. Как ни странно, для такой типичной задачи существует очень много решений, большинство из которых далеко не идеальны.

    Ниже приведён вариант, замечательно работающий во всех браузерах:

    <div id="main-page">
      ...
    </div>
    <div id="footer">
      ...
    </div>
    * { margin: 0; padding: 0;}
    html{ height: 100%; }
    body{ position:  relative; height: auto !important; height: 100%; min-height: 100%; }
    #footer{ position:  absolute; left: 0; bottom: 15px; width: 100%; }
    #main-page{ padding-bottom: 4em; }

    Исходное решение позаимствовано у Ростислава Чебыкина, где подробно расписано что и почему.

    В моём решении поправлен глюк с IE, когда подвал уносится далеко вправо, ну и сделан небольшой отступ от нижнего края страницы.

    Важное замечание

    6 комментариев