PNG-24 IE-6 background

19:39 06.05.2009

PNG-24 IE-6 background

Как группировать иконки и как показывать png-24 в background в ie6.

Посмотреть пример, и сам код:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">
/* first */
// as - один элемент забыли
DD_belatedPNG.fix('.docx, .odg');
/* second */
// так DD_belatedPNG.fix('.file_2');
// или можно даже ничего не писать, работает через класс png-vml-fix
</script>
<style type="text/css">
.png-vml-fix{
jscript: expression( DD_belatedPNG.fixPng( this ) );
}
</style>
<![endif]-->

<title> </title>
</head>
<body>

<div class="file as">
<p>
<a href="./_f/1.as">Файл 1</a>
<span class="size">(AS, 2 КБ)</span>
</p>
</div>
<div class="file docx">
<p>
<a href="./_f/2.docx">Файл 2</a>
<span class="size">(DOCX, 2 КБ)</span>
</p>
</div>
<div class="file odg">
<p>
<a href="./_f/3.odg">Файл 3</a>
<span class="size">(ODG, 2 КБ)</span>
</p>
</div>

<hr />

<div class="file_2 as_2 png-vml-fix">
<p>
<a href="./_f/1.as">Файл 1</a>
<span class="size">(AS, 2 КБ)</span>
</p>
</div>
<div class="file_2 docx_2 png-vml-fix">
<p>
<a href="./_f/2.docx">Файл 2</a>
<span class="size">(DOCX, 2 КБ)</span>
</p>
</div>
<div class="file_2 odg_2 png-vml-fix">
<p>
<a href="./_f/3.odg">Файл 3</a>
<span class="size">(ODG, 2 КБ)</span>
</p>
</div>

</body>
</html>

CSS

body {
background: url('bg.gif');
}
.file, .file_2 {
background-repeat: no-repeat;
padding-left: 40px;
min-height: 32px;
//height: 32px;
margin-bottom: 0.5em;
}
.size {
display: block;
font-size: 0.7em;
color: gray;
}
/* first */
.file {
background-position: 0 0;
}
.as {
background-image: url('pic_as.png');
}
.docx {
background-image: url('pic_doc.png');
}
.odg {
background-image: url('pic_odg.png');
}
/* second */
.file_2 {
background-image: url('pics.png');
}
.as_2 {
background-position: 0 0;
}
.docx_2 {
background-position: 0 -100px;
}
.odg_2 {
background-position: 0 -200px;
}

Ссылка на подробное описание и примеры (en).

комментарии: 2

я пишу тут

категория: 7

 

DnV

17:20 10.05.2009

PNG-24? в IE-6? в background?
И ради чего/кого так извращаться?

denisx

09:41 12.05.2009

просто заметка, чтобы при случае было где глянуть

Добавить свой комментарий

 

 

 

 

 

Всего материалов: 558, комментариев: 1253.