/* Стили для данного примера. */
.example
{
position: relative;
width: 100%;
padding:  2 0 2 4;
/* background: url('../png_in_ie/grid-10.gif') 100% 100%; */
}
.horizontal
, .horizontal ul
{
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
.horizontal:after
, .horizontal ul:after
{
content: '';
display: block;
clear: left;
}
.horizontal li
{
float: left;
margin: 0 0 0.5em 0;
padding: 0;
}
/*****************************/

/* Чтобы исправить поведение курсора и hover в IE. */
.framed a
{
cursor: pointer; text-decoration: none;
//cursor: hand;
}
.framed a:hover
{
background-color: transparent; text-decoration: underline;
}

/* Для компенсации отрицательного значения margin-bottom в IE. */
.framed.horizontal
{
//padding-bottom: 10px;
}

.framed .f
{
position: relative;
z-index: 1;
display: block; width: 100%; text-align:left;
float: left;
min-height: 10px;
//height: 10px;
color: #4a4a4a;
}
.framed .c
{ text-decoration: none;
position: relative;
z-index: 2;
display: block;
margin: 0 0 -10px 8;
/* Отступы от границ кнопки. Нижний больше на 2px, которые занимает тень. */
padding: 2px 10px 2px 15px; 
}
.framed .t
, .framed .b
{
position: absolute;
z-index: 1;
top: 0;
//top: auto;
bottom: 0;
left: 0;
right: 11px;
overflow: hidden;
//width: 100%;
//height: 100%;
}
.framed .b
{
top: auto;
bottom: -10px;
height: 10px;
}
.framed .r
{
left: auto;
//left: -11px;
right: 0;
//margin-left: 100%;
width: 11px;
}
.framed .t *
, .framed .b *
{
position: absolute;
top: 0;
left: 0;
/* Общие ширина и высота изображения. Можно указать с запасом. */
width: 800px;
height: 400px;
background: url('/framed.png') 0 0 no-repeat;
/* IE 7 уже умеет показывать png, поэтому используем хак, который он не понимает. */
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=framed.png,sizingMethod=crop);
}
.framed .t *
{
margin-top: -10px;
}
.framed .l *
{
//width: 100%;
margin-left: -11px;
}

/* Демонстрируем смену оформления у кнопки. В данном случае на hover. */
.framed a:hover .t *
, .framed a:hover .b *
{
top: -200px;
}