Рубрика: HTML


Исправляем CSS баги Internet Explorer

Рубрики: HTML
Мар.10, 2012

<!--[if IE]-->

Различные margins, paddings и размеры элементов странитцы могут отображаться в Internet Explorer по разному. Следующий код поможет нам в решении этого Internet Explorer бага.

Поместим следуюший код в заголовок нашей странитцы.

<!--[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]-->

Эти настройки будут загружены, если используется Internet Explorer для просмотра странитцы.

Центрирование при помощи margin:auto

Когда используется margin-left:auto и margin-right:auto для выравнивания элементов по центру, это не работает в Internet Explorer как в Firefox. В этом случае нам поможет исправить ситуацию следующий код.

html, body {
text-align: center;
}

Не забываем также добавить для параграфов правило выравнивания по левому краю.

p {text-align: left;}

Проблема минимальной высоты в IE

При попытке создания div, высота не уставливается меньше около 12px.
Для решения этого бага, просто добавляем следующий атрибут для нашего div.

{line-height: 0px;}

Если это не срабатывает помещаем внутри div элемени p и назначаем ему line-height: 0px;
Наш код должен быть примерно таким.

<div style="line-height: 0px; height: 5px;"></div>

<div style="height: 5px;"><p style="line-height: 0px;"></p></div>

Originally posted 2010-05-12 02:28:29. Republished by Vancouver Web Design

Теги: , , , ,
читать дальше

Закрукругление углов используя только CSS

Рубрики: HTML
Янв.16, 2012

Закрукругление углов используя только CSS

Закругление углов?
Нет ничего проще.

1. Скачиваем htc файл сдесь.
2. Загружаем его в папку images.
3. В css файле создаем класс

.curved { 

-moz-border-radius:10px; / Firefox /
-webkit-border-radius:10px; / Safari and chrome /
-khtml-border-radius:10px; / Linux browsers /
border-radius:10px; / CSS3 /
behavior:url(images/border-radius.htc);

}

4. Присваиваем html элементам класс .curved, чтобы сделать углы у них закругленными.

Замечания

1. Путь к .htc файлу должен быть относительно документа не css файла
2. Хак не работает с элементами формы.
3. Дополнительный материал для самообразования:

  • Border Radius in IE | San’s Bits and Bobs …
  • Anonymous
  • CSS3 goodies and their browser equivalents | Myk.be
  • CSS3 border-radiusを使った角丸を実現 | solo.design
  • GetHtmlCss CSS3 support in Internet Explorer 6, 7, and 8
  • Web Programming: Curved boxes in CSS « Let’s share and win the challenge of life
  • delicious Links: 14. December 2010 | miZine
  • Soluții CSS3 pentru Internet Explorer | Tutoriale
  • lifeisbetter.in » Blog Archive » Best “Rounded Corner” solutions that might just fit into your projects.
  • CSS: Rounded Corners in IE without any special Javascript?
  • CSS3 – What a beginner web designer must know. | Capability , .
  • How to use border-radius.htc with IE to make rounded corners | DeveloperQuestion.com
  • Border-radius.htc – problem z IE | Inside the Web
  • Getting CSS3 properties to render in IE6, IE7, and IE8 using a simple script. | Rumbrook Studio
  • Ombrages et arrondies avec CSS3 pour IE6, IE7 et IE8 « Bugz.fr : Un jour un bug, un bug une solution. Blog geek et high tech spécialisé dans l’informatique, le développement et le web.
  • Gambiarras para o IE simular CSS3 | Renato Gomes’ Blog
  • Turning Point » Blog Archive » Internet Explorer 6, 7, and 8에서 CSS3 속성유지하기
  • Getting border-radius to work in IE | jc-designs.net
  • Marcelo Torres – Web Designer Freelancer e WordPress Theme Developer
  • CSS3 Solutions for Internet Explorer | Code Base

    • IE8 is not very nice – pay attention here!

    I learned something while doing this. IE8.0.6 and IE8.0.76 handle this differently. First, the element with this property on it should be positioned to relative. If you have text on top of it, then that will have to be wrapped in something and also positioned relative. Example:

    <div><p>This is the text that goes on top of the rounded corners div</p></div>

    If you did this:

    <div>This is the text that goes on top of the rounded corners div</div>

    Then IE8.0.76 doesn’t play nice. IE8.06 however will work fine. I have NO idea why, but that is how it is.

    Originally posted 2011-04-09 08:08:57. Republished by Vancouver Web Design

    читать дальше