Тэг ‘css’

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

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

При установке 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  |  Нет комментариев »

Таблицы шириной 100% в ie 6 и плавающие (float) элементы

Если меню выполнено в виде плавающего блока (например, div#left {float:left;width:200px;}), а в правом блоке сделан отступ шириной такой же или чуть больше ширины плавающего блока (div#right{margin-left:200px;}), то при попытке вставить в правый блок таблицу <table width=”100%”>…</table> она отображается ниже плавающего блока (как будто прописано свойство clear). Если прописать width=”99%”, то таблица отображается на своем месте.

Если вставить дополнительный слой шириной 99% как контейнер для таблицы (а в таблице прописать 100%), то таблица опять же отобразится на своем месте.

Во-первых, проверяем, указан ли DOCTYPE. К тому же сползание таблицы еще зависит от типа документа. Похоже, для Strict-документов, браузер прибавляет к общей ширине таблицы (100%) дополнительные бордюрные пиксели по бокам. Проверить, в них ли причина, довольно легко -пишем вместо {border:solid 1px #000;} более “толстый” вариант {border: 10px solid #000000;}, а затем убираем границы, и, для наглядности можно выделить цветом {background: #aaa;}

http://xpoint.ru/forums/thread/29197.xhtml
http://xpoint.ru/forums/thread/29164.xhtml

Опубликовано Май 7, 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  |  Нет комментариев »

Прозрачность png в ie 6 и ниже

Internet Explorer до 6 версии включительно “по умолчанию” не отображает прозрачность у PNG-изображений.

Очень подробно все проблемы, связанные с отображением PNG картинок в IE расписаны у Игоря:

  • Суть и решение проблемы прозрачности PNG в IE6
  • Краткая информация о Фильтр AlphaImageLoader
  • проблема “Не работают ссылки на png-фоне”
  • PNG в IE темнее - искажение цветов PNG изображений в Internet explorer

http://www.tigir.com/alpha_png.htm

UPD - неплохая статья про PNG и IE

http://www.xiper.net/html-and-css-tricks/glyuki-brauzerov/ie6/png-transparency-ie6.html

Опубликовано Ноябрь 21, 2007 | автор: 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  |  Нет комментариев »