Как Clip подружить c упрямым ослом (IE)

Jumper · February 1, 2010

Доброй ночи...

Вот сижу и думаю как же это подружить этого Clip с IE.

Читал что место запитых нужно пробелы ставить но не помогло...

Приведу пример всего что я делаю.

Есть изображение квадратика.

Квадратик я обрезаю с помощью клипа на четыре части получается четыре угла.

Углы с верстались нормальна

Вот пример стиля углов.

/* на четыре угла приходится четыре дива вот с таким стилем*/
.jwb_Board_One, 
.jwb_Board_Two, 
.jwb_Board_Three, 
.jwb_Board_Four{
	position:absolute; /* позиционирования элемента*/
	width: 30px;		/* ширина блока*/
	height: 30px;	   /* высота блока */
	background-image: url('../images/BoardAngles.png'); /* фоновое изображение тот самый квадратик */
	z-index:-1;	  
}
/* правый верхний угол */
.jwb_Board_One{
	top:0;
	right:0;
	clip:rect(auto auto 15px 15px);
}
/* Левый верхний угол */
.jwb_Board_Two{
	top:0;
	left:0;
	clip:rect(auto 15px 15px auto);
}
/* Нижний левый угол */
.jwb_Board_Three{
	bottom: 0;
	left: 0;
	clip: rect(15px 15px auto auto);
}

/* нижний правый угол */
.jwb_Board_Four{
	bottom: 0;
	right: 0;
	clip: rect(15px auto auto 15px);
}

Но вот когда начинаю верстать границы у меня почему то не получается растянуть на весь лист, главное это проблема только в IE в остальных браузерах все в порядке.

Изображение вертикальных границ и изображение горизонтальных границ они представляют из себя две полоски... Я их делю клипом на две чати.

Привиду пример (Расписывать сильно не буду где что... Ну если кому нужно будет могу написать....)

/** горизонтальные границы **/

.jwb_Board_Five,
.jwb_Board_Six{
	position:absolute;
	left: 15px;
	right: 15px;
	height: 30px;
	background-image: url('../images/BorderHorizon.jpg');
}
/* Верхняя горизонтальная граница */
.jwb_Board_Five{
	top: 0;
	clip: rect(auto auto 15px auto);
	overflow: auto;
	border:1px solid #333;
}
/* Нижняя горизонтальная граница */
.jwb_Board_Six{
	bottom: 0;
	clip: rect(15px auto auto auto);
	border:1px solid #333;		
}
/** END **/

/** Вертикальные границы **/

.jwb_Board_Seven,
.jwb_Board_Eight{
	position:absolute;
	z-index:-1;
	top: 15px;
	bottom: 15px;
	width: 30px;
	background-image: url('../images/BorderVertikale.jpg');	
}
/* правая вертикальная граница */
.jwb_Board_Seven{
	right:0;
	clip: rect(0 0 0 15px);
}
/* левая вертикальная граница */
.jwb_Board_Eight{
	left:0;
	clip: rect(0 15px 0 0);
}
/** END **/

Если не понятно объяснил могу связаться по icq .

Edited February 1, 2010 by Jumper

Энди · February 2, 2010

зачем тебе нужен этот IE.Совсем скоро ie уже небудет.изза ево незащищенности и тугой работоспособности.ненавижу этот браузер)

Jumper · February 2, 2010

А по теме?

Great Rash · February 2, 2010

clip в ИЕ работает

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px Tahoma;
		}

		body {
			margin: 10px;
		}

		.clip {
			position: absolute;
			width: 500px;
			height: 500px;
			background: red;
			clip: rect(20px 100px 100px 20px);
		}
	</style>
</head>

<body>

	<div class="clip"></div>

</body>
</html>

psywalker · February 2, 2010

Да лана работает? В ИЕ7 вроде бы с ним траблы?

Great Rash · February 2, 2010

Проверь мой код. Проверил его в Мозилле, ИЕ 6,7,8

psywalker · February 2, 2010

Проверь мой код. Проверил его в Мозилле, ИЕ 6,7,8

Да, согласен, но я помню у нас с тобой был специфический случай, помнишь про бордер вокруг экрана? Там короче с клипом нас ИЕ7 подвёл, я и запомнил. Видимо какие-то спец. случаи может не прокатить.

Jumper · February 2, 2010

Что значит не выхода из этой задачи?

psywalker · February 2, 2010

Что значит не выхода из этой задачи?

Почему нет, ведь дружище выше привёл тебе пример, вроде везде пашет, в чём проблема?

Great Rash · February 2, 2010

Неправда, не подвел. А тот пример я себе в архивчег упаковал и холю и лелею его. Уж больно уникальное решение тогда придумали. Так что все нормально работает.

Jumper, сделайте тестовую страницу. Сразу станет видно где проблема.

psywalker · February 2, 2010

Неправда, не подвел. А тот пример я себе в архивчег упаковал и холю и лелею его. Уж больно уникальное решение тогда придумали. Так что все нормально работает.

Так это понятно, я тоже его держу, но там твоё решение не основано на клипе вроде?

Great Rash · February 2, 2010

Там не только мое решение, а коллективное. И один камрад (не помню ника) предложил отличное решение основанное на клипе. Если есть желание могу запостить код в личку.

psywalker · February 2, 2010

Там не только мое решение, а коллективное. И один камрад (не помню ника) предложил отличное решение основанное на клипе. Если есть желание могу запостить код в личку.

Вот я про решение того камрада и говорю, в нём клип подвёл в ИЕ7, давай его решение в личку, если можешь.

Jumper · February 2, 2010

Стал заново страницу верстать и все заработало

psywalker · February 2, 2010

Стал заново страницу верстать и все заработало

Конеш, а с чего ему не работать-то?)

Jumper · February 2, 2010

Спасибо всем... Отличный Ресурс

Edited February 2, 2010 by Jumper

Great Rash · February 2, 2010

Ну во! Запомните, что переверстка проблемного места в отдельном файл решает 90% всех проблем и помогает разобраться что к чему.

Jumper · February 2, 2010

Теперь я это навсегда запомню....

Столько времени в пустую потратил

Edited February 2, 2010 by Jumper

Sign In

Как Clip подружить c упрямым ослом (IE)

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information