Проблем с CSS за IE, Chrome, Safari, Yandex..

bgtupanfighter

bgtupanfighter

Well-Known Member
Какво да направя, че долният css да се "разбере" от браузерите: IE, Chrome, Safari, Yandex

PHP: 
-moz-box-shadow:inset 0px 0px 0px 0px #311D21;
	-webkit-box-shadow:inset 0px 0px 0px 0px #311D21;
	box-shadow:inset 0px 0px 0px 0px #311D21;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #311D21), color-stop(1, #311D21) );
	background:-moz-linear-gradient( center top, #774F58 5%, #311D21 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#311D21', endColorstr='#311D21');
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:0px solid #623D46;
	display:inline-block;
	font-family:tahoma;
        font-weight:bold;
	padding:0px 24px;
	text-decoration:none;
	margin: 30px 1px 1px 0px;

Само Firefox се справя с "трудната задача". Crome, Safari и Yandex се справят наполовина, IE - въобще.
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

Да градиента изобщо не го засичат трите браузера, а IE не хваща и радиуса
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

bgtupanfighter каза:
Да градиента изобщо не го засичат трите браузера, а IE не хваща и радиуса
Увеличете...

Ми те са ти еднакви стойностите старт колор и енд колор, за това не бачка.

Смени едното. И за ИЕ е малко по различен.

Това:

HTML: 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#132E00');

Работи в ИЕ-9 гаранция.

GradientType=0 - е вертикален
GradientType=1 - е хоризонтален

Забележи, че старт колор е с 2 нули повече в началото. Виж разрови се, имаше един gradient creator онлайн, от там го изрових ама не помня урл-а.
Ако не се оправиш, ще го потърся.

А за ИЕ

HTML: 
border-radius:...;

би трябвало да работи.
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

Що в мозила правиш едно, пък в хром/сафари - съвсем друг градиент?

Ето синтаксиса:
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}
Увеличете...

Source: http://css3please.com/

PS: баба и на човешки косъм не бае.
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

Нещо не правя като хората, не се получава :)
Да не би да се "карат" двата кода... Това е за горният и долният ред бутони за charovnik.com

горният ред:
Код: 
        -moz-box-shadow:inset 0px 1px 0px 0px #311D21;
	-webkit-box-shadow:inset 0px 1px 0px 0px #311D21;
	box-shadow:inset 0px 1px 0px 0px #311D21;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #311D21), color-stop(1, #311D21) );
	background:-moz-linear-gradient( center top, #774F58 5%, #311D21 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#774F58', endColorstr='#311D21');
	background-color:#311D21;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:0px solid #623D46;
	display:inline-block;
	color:#774F58;
	font-family:tahoma;
	font-size:11px;
	font-weight:bold;
	padding:2px 10px;
	text-decoration:none;
	margin: 4px 0px 0 0px;

долният ред:
Код: 
        -moz-box-shadow:inset 0px 0px 0px 0px #311D21;
	-webkit-box-shadow:inset 0px 0px 0px 0px #311D21;
	box-shadow:inset 0px 0px 0px 0px #311D21;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #311D21), color-stop(1, #311D21) );
	background:-moz-linear-gradient( center top, #774F58 5%, #311D21 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#774F58', endColorstr='#311D21');
	background-color:#311D21;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
    display:inline-block;
    font-family:tahoma;
	font-weight:bold;
	padding:0px 0px;
	text-decoration:none;
	margin: 0px 0px 0px 0px;

Вижте в мозила как го мъчих да изглежда (да заоблят и преливат). Във всички други браузери се мръщи, а сега на последната версия на Safari дори маргините се оплескаха :-o
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

Дай направо линк да погледнем, там. Иначе експлорера не поддържа css3, въпреки да казват, че ie9 го.
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

Ооо данке вери алл :) оправих се... Било точно, че правя за едното едно, а за другото - друго. Остана само опера и ИЕ
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

Само още малко и ви оставям на мира :D
Сега за всички е реди, и операта тоже (данке то ноки), ИЕ го игнорирам :) Обаче след като ъпнах Safari, при новата версия се прецака некой от маргините. Не мога да включа кой маргин сафарито не ще да захапе. (вижте под сафари как мести дива)
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

position: relative;
Увеличете...

Опитай да го сложиш където е проблема.
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

Да, насочиме хубаво :wink: Те се оказаха 200 галимации, но в крайна сметка стана :)
Бях затрил цял клас от стиле.цсс и прочие и прочие...както и да е :D Само ми е интересно защо само сафарито се разпищя...и то само новата версия.

Мерси на всички за бързият хелп :)
 
От: Проблем с CSS за IE, Chrome, Safari, Yandex..

bgtupanfighter каза:
Да, насочиме хубаво :wink: Те се оказаха 200 галимации, но в крайна сметка стана :)
Бях затрил цял клас от стиле.цсс и прочие и прочие...както и да е :D Само ми е интересно защо само сафарито се разпищя...и то само новата версия.

Мерси на всички за бързият хелп :)
Увеличете...

За сафарито не знам ама при мен предимно ие. пищи първо :D
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе