Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы помогите с градиентом блока в IE в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Проблема такая: при попытке создать градиент в IE при помощи кода: filter: progid: DXImageTransform.Microsoft.gradient(startColorstr= '#cccccc', endColorstr='#000000'); цвет выходит за рамки border (например - ...


Закрытая тема
 
Опции темы
Старый 03.07.2011, 21:43   #1
Проблема такая:
при попытке создать градиент в 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;
}
вот скриншот:
Изображения
Тип файла: png 2.png (8.4 Кб, 4 просмотров)

Последний раз редактировалось phenor; 03.07.2011 в 21:47..
 
Старый 03.07.2011, 21:43
Ссылки
Старый 05.07.2011, 16:28   #2
IE просто не понимает свойства border-radius, поэтому разпостраняет твой градиент по всей кнопке. Научи его понимать это, можешь погуглить. Я нашел решение тут:

IE-CSS3
 
Старый 05.07.2011, 16:28
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с градиентом 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


Текущее время: 22:59. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум