Тэг ‘верстка’

Как отключить преобразование телефона skype в браузерах и в iOs

Часто верстка номеров телефона “ползет” на компьютерах, где установлено дополнение Skype, а также на iOS в браузере Safari, который автоматически определяет набор цифр как телефонный номер

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

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Отключить определение номера в браузере iOS

<meta name="format-detection" content="telephone=no" />

Опубликовано Август 29, 2012 | автор: levik  |  Комментарий (1) »

IE 8 bug display:table-cell и изображение с max-width внутри

Столкнулся с непонятным багом IE 8 при помещении внутрь элемента с display:table-cell изображения с ограниченной шириной max-width, которое по ширине больше ширины элемента. Блочный элемент растягивается, как будто изображение нормальной ширины.

upd

Задумка была следующая - в блоке заранее заданных размеров размещать изображение с вертикальным и горизонтальным центрированием.

  1. Для выравнивания по горизонтали используем css-свойство text-align:center;
  2. Для выравнивания по вертикали используется  vertical-align:middle;display:table-cell;
  3. Для уменьшения больших изображений (вписываем в блок) max-width и max-height
  4. Пункты 3 и 4 дублируем в отдельный css с использованием expression для ie 6 и подключаем условным комментарием (if lte IE 6)

Изображение с max-width внутри элемента display:table-cell

Такой “трюк” работает во многих (распространенных) браузерах - Firefox, Opera, Safari

Все бы ничего, но IE8 в случае, если изображение больше заданной ширины “растягивает” блочный элемент, как будто ширина изображения не изменяется, но при этом само изображение показывается уменьшенным (с учетом max-width).

В поисках решения, как оказалось, я не первый (мягко говоря - запоздал на пару лет), кто столкнулся с аномальным поведением блоков table-cell, в которых находятся изображения

The cause of this is a bug in IE8’s awesome new standards-supporting rendering engine (sarcasm intended) which, until fixed (if ever), will cause table-cell elements to scale out of proportion like that

Если я правильно понимаю, в IE 8 “новый движок”, который изобилует некоторыми “характерными особенностями” (когда-то искренне наделся, что с выходом IE7 глючность /float 3px, pngfix … / “ослика” будет в прошлом), ан нет:

The following regressions are present in IE 8:

* Min-width on new block formatting context beside a float is sometimes treated as width.
* Percentage width floats cause justified text to move.
* Max-width fails on floats with auto overflow.
* Scrollbar height is added onto max-height instead of subtracted from it.
* Max-height acts as height on elements with scrollbars.
* Combining max-height, float and overflow:scroll will cause the entire page to disappear.

http://bytes.com/topic/html-css/answers/870359-ie8-display-table-cell-max-width-bug

Там же были найдены варианты “обхода” этого бага:

  1.  добавить внешний элемент-обертку (таблица) с фиксированной шириной (display:table;table-layout:fixed;width:XXXpx) равной ширине ячейки (блока display:table-cell)
  2. добавить внутренний элемент-обертку изображения с фиксированной шириной, равной максимальной ширине изображения

Обходим расползание элемента display:table-cell

upd для IE6 ограничение max-width + max-height обходим с expression:

	width: expression(this.width>89&&(89/this.width)< (103/this.height)? 89: true);
	height: expression(this.height>103&&(89/this.width)>=(103/this.height)? 103: true);

А вертикальное выравнивание - с помощью inline-позиционирования

Опубликовано Январь 24, 2011 | автор: levik  |  Комментарий (1) »

CSS-framework - верстка на основе фреймворка

В последнее время накопившийся опыт (которого во многих областях более чем достаточно) преобразуется в различного вида framework-и (англ каркас, структура) - наборы готовых библиотек-файлов-шаблонов, которые можно взять за основу для дальнейшей доработки. Такая тенденция не обошла и CSS (Каскадные таблицы стилей) верстку.

Каждый, кому приходилось сталкиваться с версткой, скорее всего после двух-трех сверстанных макетов замечал, что многие элементы повторяются от сайта к сайту. И если вдруг возникло (вполне нормальное) желание вынести всё это в “шаблон” или “болванку” для верстки - знайте, Вы не одиноки!

Читать целиком »

Опубликовано Август 17, 2010 | автор: levik  |  Комментарий (1) »

font size= и font-size: (html vs css)

При переносе верстки с использованием тегов <font size=”2″></font> в свойство CSS font-size, выяснилось, что различные браузеры,  воспринимают CSS-свойства xx-small, x-small, small, large…

Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным.  По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера
и операционной системы.

CSS xx-small x-small small medium large x-large xx-large
HTML 1 2 3 4 5 6 7

Действительно, в различных браузерах результаты применения одинакового стиля сильно отличаются: проверить себя можно тут http://rotorweb.ru/typography/css-font-size-conversion-chart.html

Условное обозначение Размер шрифта
в Firefox 3.6, Chrome, Safari 4, px
Размер шрифта
в Opera 10, IE6,7,8, px
xx-small 9 10
small 12 16
large 18 24
xx-large 32 48

Опубликовано Июнь 21, 2010 | автор: levik  |  Комментарий (1) »

wmode - наложить рисунок на флешку, прозрачная флешка

Как наложить рисунок поверх флешки, чтобы перекрыть всю её или часть (в зависимости от размера рисунка)?

Размещение абсолютно позиционируемого div с фоновым рисунком и z-index:1000 по идее должно помочь. Ан нет - не так все просто. Флешка почему-то располагается поверх рисунка, хотя по z-index должно быть всё наоборот.

Как включить отображение прозрачности у флешки?

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

Немного теории

Оказывается, для объектов флеш в html определен параметр wmode, который задает режим внедрения элементов флеш в web-страницу. По умолчанию параметр wmode имеет значение window, который определяет наложение флешки поверх всего html. Таким образом, независимо от значения z-index и позиционирования элементов поверх флешки рисунок отображаться не будет.

Парамтер wmode может принимать и другие значения:

  1. opaque (англ. непрозрачный), аналогичен режиму window, но позволяет перекрывать флешку HTML-слоями, используя z-index. Как раз то, что нужно! Используем этот режимдля наложения рисунка поверх флешки - вопрос один.
  2. transparent (англ. прозрачный) в отношении позиционирования флеш-элементов похож на предыдущий -  возможность размещения слоев HTML поверх флешки осталась. К тому же, фон флешки может быть прозрачным. Следует отметить, что при вставке флешки в режиме transparent возможно замедление работы браузера!

Переходим к практике :)

Задавать значения для wmode можно как атрибут для тега embed или object:

<object wmode="opaque" ... />

Либо через тег param:

<object>
<param name="wmode" value="opaque" />
...
</object>

Более подробно с описанием параметра wmode можно ознакомиться на сайте Adobe в разделе справочной системы по Flash.

Опубликовано Май 2, 2010 | автор: levik  |  Комментарии (2) »

Округление размеров в различных браузерах

Да да.. Как оказалось, размеры шрифта разные браузеры подсчитывают по-разному.

При установке font-size:87%; IE 6, IE 7 , Firefox отображали надписи шрифтом в 12px, opera - 11px. При 88% - достигалось единообразие (12px) . Почему-то я не успокоился… :) Пошел дальше - при 86% ситуация такая же как при 87. Но при 85 процентах… IE6 и его младший (т.е. более поздний) брат показывали всё так же 12-px шрифтом, а Firefox стал солидарным с Oper’ой - перешел на 11px. При 84 - снова пришли к однообразию. :)

# Браузер 88% 87% 86% 85% 84%
1 IE 6,7 12px 12px 12px 12px 11px
2 Firefox 12px 12px 12px 11px 11px
3 Opera 12px 11px 11px 11px 11px

Опубликовано Июль 12, 2008 | автор: levik  |  Нет комментариев »

Удвоение отступа (margin) в Internet Explorer 6

Не сразу понял, что происходит когда столкнулся с багом - в Internet explorer 6 отступ визуально казался больше, чем в Mozilla, Opera IE7. При увеличении отступа эта разница становилось более заметной. Хотя, никаких предпосылок к этому, казалось бы, быть не должно - В css всё ровно… Баг наблюдался при указании отступа для “плавающего” элемента (margin-left:10px; float:left) причем, только если отступ и выравнивание в одну сторону.

Как оказалось, это довольно известная проблема с удвоением отступа margin характерна для IE версии 6 и ниже и именно при выравнивании элемента в сторону отступа.. И название у неё имеется  - Doubled Float-Margin Bug.

Конечно, можно отказаться от использования margin для плавающего элемента, но есть другой более действенный способ - прописать display:inline для этого же элемента. Кроме того, можно воспользоваться условными комментариями для Internet Explorer версии 6 и ниже (lt 6) или хаками.

Дополнительную информацию можно посмотреть тут: http://www.positioniseverything.net/explorer/doubled-margin.html

upd Бонус расползание фона (background) в IE  при ненулевом отступе (margin) как раз на расстояние отступа (margin-bottom:10px; background:url() repeat-y;) вылечилось добавлением width:100% для блокового элемента (ie margin background)

Опубликовано Февраль 25, 2008 | автор: levik  |  Нет комментариев »

IE 3px float bug

IE 3px float bug - глюк IE 6.

<style>
#left {width: 200px;float: left; border: solid 1px #f00;}
#right {padding:0;border: solid 1px #0f0;margin: 0 20px 0 250px;}
#right p{background: #000;height: 100px;margin:0;}
</style><div id=”left”> </div>
<div id=”right”><p> </p></div>

В IE 6 появляется отступ 3 px у элемента p, который находится на уровне  элемента #left, если блок “обтекается” другим блоком (у которого не задана высота) и у последнего есть дочерний блок(у которого задана высота), то этот дочерний блок будет иметь отступ в 3px от родительского блока слева. Замудрено, но похоже на правду…

Как лечить!?
1) Прописать высоту у элемента right (#right:height:1%)
2) С помощью условных комментариев задать отрицательный отступ в ie6

<!–[if lte IE 6]>
<style type=”text/css”>
#right p {margin-left:-3px;}
</style>
<![endif]–>

Опубликовано Октябрь 18, 2007 | автор: levik  |  Нет комментариев »