border groove и border ridge в IE

ruff20 · October 20, 2009

Приветствую вас!

Есть задача - сделать двойную рамку, причем цвет внешней линии должен быть - черный, а "дублирующей" внутренней линии - серый.

Соответственно реализовано это с помощью border groove и border ridge, а именно:

div

{

border-top:2px groove rgb(0, 0, 0);

border-right:2px ridge rgb(0, 0, 0);

border-bottom:2px ridge rgb(0, 0, 0);

border-left:2px groove rgb(0, 0, 0);

}

Во всех браузерах эта конструкция отображается как требуется, КРОМЕ IE5/IE6/IE7, где видно только толстую жирную рамку, а не двойную - черно-серую!!!

Подскажите, пожалуйста, что сделать, чтобы это правильно работало в IE?

Заранее благодарен.

Justnewone · October 20, 2009

Приветствую вас!
Есть задача - сделать двойную рамку, причем цвет внешней линии должен быть - черный, а "дублирующей" внутренней линии - серый.
Соответственно реализовано это с помощью border groove и border ridge, а именно:
div
{
border-top:2px groove rgb(0, 0, 0);
border-right:2px ridge rgb(0, 0, 0);
border-bottom:2px ridge rgb(0, 0, 0);
border-left:2px groove rgb(0, 0, 0);
}
Во всех браузерах эта конструкция отображается как требуется, КРОМЕ IE5/IE6/IE7, где видно только толстую жирную рамку, а не двойную - черно-серую!!!
Подскажите, пожалуйста, что сделать, чтобы это правильно работало в IE?
Заранее благодарен.

два блока, один в другом, у одного черный однопиксельный, у внутреннего серый.

Searcher · October 20, 2009

увеличить толщину не пробовали?

ruff20 · October 20, 2009

два блока, один в другом, у одного черный однопиксельный, у внутреннего серый.

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

посчитал, что вариант border groove самый короткий и оптимальный и был уверен, что некорректное отображение в IE как-то решается, но пока не нашел решения...

увеличить толщину не пробовали?

увеличивал, тот же эффект...в одной статье я прочел, что "IE5 искренне считает, что border может быть только solid (сплошная линия)", хотя в других источниках, где приводился полный перечень всех стилей бордюра, написано, что "Поддерживается IE начиная с 4.0"

но должен же этот баг как-то решаться...

Edited October 20, 2009 by ruff20

psywalker · October 20, 2009

Найди отличие:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { margin: 50px;}
	div
{
border-top:12px groove #999;
border-right:12px ridge red;
border-bottom:2px ridge rgb(0, 0, 0);
border-left:2px groove rgb(0, 0, 0);
}
</style>
</head>

<body>
<div>sdfds</div>
</body>
</html>

ruff20 · October 20, 2009

Найди отличие:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { margin: 50px;}
	div
{
border-top:12px groove #999;
border-right:12px ridge red;
border-bottom:2px ridge rgb(0, 0, 0);
border-left:2px groove rgb(0, 0, 0);
}
</style>
</head>

<body>
<div>sdfds</div>
</body>
</html>

посмотрел, попробовал, видимо фишку не до понял, поэтому возник вопрос...

т.к. мне необходим черный цвет внешней рамки, заменил:

border-top:12px groove #999; на border-top:12px groove #000;

border-right:12px ridge red; на border-right:12px ridge black;

получились опять жирные черные полосы...

т.е. при #999 и red отработано идеально, а при #999 и black - опять неудача...

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

разъясните, пожалуйста, в чем прикол...

psywalker · October 20, 2009

посмотрел, попробовал, видимо фишку не до понял, поэтому возник вопрос...
т.к. мне необходим черный цвет внешней рамки, заменил:
border-top:12px groove #999; на border-top:12px groove #000;
border-right:12px ridge red; на border-right:12px ridge black;
получились опять жирные черные полосы...
т.е. при #999 и red отработано идеально, а при #999 и black - опять неудача...
сложилось впечатление, что проблема в черном цвете как таковом при использовании данных стилей, даже не смотря на предложенную реализацию...
разъясните, пожалуйста, в чем прикол...

Я не знаю в чём прикол, просто не увлекаюсь такими штуками, попробуй вместо black писать #000;

ruff20 · October 20, 2009

Я не знаю в чём прикол, просто не увлекаюсь такими штуками, попробуй вместо black писать #000;

я попробовал разные варианты:

border-top:12px groove #000;

border-right:12px ridge black;

и наоборот:

border-top:12px groove black;

border-right:12px ridge #000;

не проходит...

зато проходит, когда:

border-top:12px groove #999;

border-right:12px ridge red;

что за фигня такая с черным цветом...не понятно...

пока продолжаю искать решение...

psywalker · October 20, 2009

Если запаришься искать, то советую тебе сделать бокс с загруглёнными углами, который будет везде работать

ruff20 · October 20, 2009

Если запаришься искать, то советую тебе сделать бокс с загруглёнными углами, который будет везде работать

да уже запарился...

может тогда лучше использовать плагин JQuery Corner: http://www.malsup.com/jquery/corner/

который, если я правильно понял, должен решить сразу две задачи: двойную рамку двух цветов с закругленными углами...

хотелось бы найти оптимальный вариант - как можно меньше нагромождать кода и при этом решить задачу для всех браузеров без косяков...

psywalker · October 20, 2009

Не, ну квери то сразу зачем, это лишнее, просто тупо возьми и сделай блок с закруглёнными углами, на чистом CSS, как тут хотябы: http://psywalker.ru/Portfolio/Himik/main-page.html

Searcher · October 20, 2009

Да уж, ради уголков целый куери тащить - неразумно. А вместо черного можно почти черный попробовать, например #000002

psywalker · October 20, 2009

Да уж, ради уголков целый куери тащить - неразумно. А вместо черного можно почти черный попробовать, например #000002

ну да, тоже хорошая идея :unsure:

ruff20 · October 22, 2009

спасибо за помощь.

на данный момент решил оставить вариант через border groove и ridge и подобрать для IE близкий к черному цвет, например, такой #939090, для остальных браузеров прописать #000.

Методом проб пришел к выводу, что цвета близкие к черному, которые начинаются с 0, в том числе и #000002 не проходят.

psywalker впечатлился вашим портфолио :angry:

psywalker · October 22, 2009

спасибо за помощь.
на данный момент решил оставить вариант через border groove и ridge и подобрать для IE близкий к черному цвет, например, такой #939090, для остальных браузеров прописать #000.
Методом проб пришел к выводу, что цвета близкие к черному, которые начинаются с 0, в том числе и #000002 не проходят.
psywalker впечатлился вашим портфолио

Каким портфолио, откуда?

ruff20 · October 22, 2009

Каким портфолио, откуда?

вот этим!!!

* Parent Directory

* AndreyD/

* BestHome/

* ChiropractorSalon/

* FreshWebLab/

* Himik/

* MarkDubovsky/

* Sandex/

* Ural/

Edited October 22, 2009 by ruff20

psywalker · October 22, 2009

вот этим!!!
* Parent Directory
* AndreyD/
* BestHome/
* ChiropractorSalon/
* FreshWebLab/
* Himik/
* MarkDubovsky/
* Sandex/
* Ural/

аа, ты про это, неужели прям понравилось так? :angry:

ruff20 · October 22, 2009

аа, ты про это, неужели прям понравилось так?

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

psywalker · October 22, 2009

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

Ну молодец, ковыряйся конечно-же, но тайны никому не выдавай :angry:

ruff20 · October 22, 2009

Ну молодец, ковыряйся конечно-же, но тайны никому не выдавай

:angry: спасибо

EGORR · October 22, 2009

ruff20, посмотри здесь http://egorr.site88.net/text_block/

Может пригодится.

ruff20 · October 23, 2009

ruff20, посмотри здесь http://egorr.site88.net/text_block/
Может пригодится.

Спасибо, скачал.

Sign In

border groove и border ridge в IE

Question

Link to comment

Share on other sites

21 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

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