помогите с градиентом блока в IE

phenor · 03.07.2011, 21:43

Проблема такая:
при попытке создать градиент в IE при помощи кода:
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr= '#cccccc', endColorstr='#000000');
цвет выходит за рамки border (например - border:6px solid grey; ), если он установлен.

вот html код:

Код:

<!doctype html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>test</title>
  <link rel="stylesheet" type="text/css" href="button.css">
  <!--[if IE]>
   <link rel="stylesheet" type="text/css" href="button_ie.css">
  <![endif]-->

</head>
<body>
	<a href="#" class="button one" title="one button">one</a>
	<div class="clear"></div>
</body>
</html>

вот css код:

Код:

.button {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
	height:27px;
	border:6px solid grey;
	font:27px Helvetica,Arial,sans-serif;
	text-align:center;
	cursor:default;
	border-radius:20px;
}
.button:hover,.button:focus {
	border-top-color: #28597a;
	border-bottom-color: #28597a;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000fff', endColorstr='#fff000');
	color: #ccc;
}
.button:active {
	top:0px;
	box-shadow:inset 0 0 8px rgba(80,80,80,0.5)
}
.one {
	border-right-width:0
}
.one:active {
        top:0;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8B4513', endColorstr='#CD5C5C');
}
.one {
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}

вот скриншот:

Novosad · 05.07.2011, 16:28

IE просто не понимает свойства border-radius, поэтому разпостраняет твой градиент по всей кнопке. Научи его понимать это, можешь погуглить. Я нашел решение тут:

IE-CSS3

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблема с градиентом	Fintrolll	Растровая графика	2	02.09.2012 12:20
фон для блока удалить	parch	HTML, CSS, JavaScript	4	22.05.2010 19:42
Перенос блока в IE 6.0	Medon	HTML, CSS, JavaScript	2	09.03.2010 17:27
Javascript - движение блока	Glook	HTML, CSS, JavaScript	6	11.03.2008 20:52
Ширина и высота блока в Nc	graphh	HTML, CSS, JavaScript	6	08.04.2004 13:30

05.07.2011, 16:28	#2
Novosad	IE просто не понимает свойства border-radius, поэтому разпостраняет твой градиент по всей кнопке. Научи его понимать это, можешь погуглить. Я нашел решение тут: IE-CSS3

03.07.2011, 21:43
Ссылки