@font-face

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

Ну а дальше пример, собственно:
 
<style>
@font-face {
 font-family: 'AmericanTypeWriter';
 src: url('american_typewriter_medium_bt.eot');
 src: local('☺'), url('american_typewriter_medium_bt.ttf') format('truetype');
}
</style>

.amertw{ font-family: 'AmericanTypeWriter', serif; }

<div class="amertw">Hello</div>
 

Работает по сути везду, IE4+, FF, Opera 10, Safari, Chrome

Абсолютно-относительное позиционирование

16.03.2009

Опять, все всё знают кроме меня.

Как абсолютно спозиционировать объект внутри родителя? Оказывается, очень просто:

 

div.parent{
  width: 200px;
  height: 100px;
  border: 1px solid red;
  position: relative;
} div.child{ width: 50px; height: 50px; border: 1px solid green; position: absolute; top: 10px; left: 10px; }


min-height, min-width в Internet Explorer

26.12.2008

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

Так вот, есть CSS2, в нем min-height, min-width. В IE - хрена. Решение, но надо чтобы был включен JavaScript:

.div { 
   height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* sets min-height for IE */
   min-height: 333px; /* sets min-height value for all standards-compliant browsers */
}
.division { 
   width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* set min-width for IE */
   min-width: 333px; /* sets min-width value for all standards-compliant browsers */
}

 

Подглядел здесь.


Прозрачность в CSS

24.12.2008

До недавно был уверен, что полноценной кросброузерной прозрачности не бывает. До чего техника дошла... Обещают, что унифицированная реализация будет с приходом CSS3.

 

.transparent{
	z-index: 10;
	top: 0px;
	left: 0px;
	position: absolute;
	background-color: black;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .5;
}