Текст на полупрозрачном фоне

dmitriev · February 3, 2009

Помогите разобраться!!!

Почему в таком варианте все правельно отображается и в опере и в эксплорере:

<html>

<head>

<title>Untitled Document</title>

#container{

position:relative;

}

.overlay{

position:absolute;

top:0;

bottom:0;

left:0;

width:100%;

background:#009CE6;

opacity:0.2;

-khtml-opacity: 0.2

-moz-opacity:0.2; /* для старых браузеров на основе Gecko */

filter:alpha(opacity=20); /* Для IE6&7 */

}

.content {

position:relative;

}

* html .xboxcontent {

height:1px;

}

* html #container .overlay {

height: expression(document.getElementById("container").offsetHeight);

}

</style>

</head>

<body>

<tr>

<td>

<div class="content">контент1</div>

<div class="content">контент2</div>

<div class="content">контент3</div>

</div>

</td>

</tr>

</table>

</body>

</html>

В вышеуказанном случае, если стиль прописан локально в файле (как видно из примера), експлорер прозрачность фона отображает правельно и растягивает его так как надо!!!

А если стиль прописать отдельно в файле, то эксплорер прозрачность неотображает!!! КАК БЫТЬ????

HTML-файл:

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<tr>

<td>

<div class="content">контент1</div>

<div class="content">контент2</div>

<div class="content">контент3</div>

</div>

</font>

</div>

</td>

</tr>

</table>

</body>

</html>

CSS-файл(style.css):

/*для прозрачности контейнера*/

#container{

position:relative;

}

.overlay{

position:absolute;

top:0;

bottom:0;

left:0;

width:100%;

background:#ffffff;

opacity:0.6;

-khtml-opacity: 0.6;

-moz-opacity:0.6; /* для старых браузеров на основе Gecko */

filter:alpha(opacity=60); /* Для IE6&7 */

}

.content {

position:relative;

}

* html #container .overlay {

height: expression(document.getElementById("container").offsetHeight);

}

/*конец для прозрачночти контейнера*/

КТО ЗНАЕТ В ЧЕМ ПРОБЛЕМА???? - ПОМОГИТЕ!!!!

Edited February 3, 2009 by dmitriev

Vlad · February 4, 2009

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

Современный код должен быть таким.

#transparentDiv {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);

opacity: .6;

}

dmitriev · February 4, 2009

Балин!!!

Вот чаво у меня не хватало, так это DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Вот зараза!!!

IE пытается поддерживать стандарты W3C, а Opere это по барабану!!!

Вот что нашел:

(Внимание: броузер Opera не играет по таким правилам; он всегда пытается отобразить страницу так, как если бы она соответствовала стандартам. Слава Опере! С другой стороны, Opera пока не полностью поддерживает стандарт W3C DOM, но работа над этим уже ведется.)

Кому интересно статью нашел тут - http://www.realcoding.net/article/view/525

ЗЫ. значит где то я чтото прописал не по стандартам!!!

КАК ОБОЙТИСЬ БЕЗ DOCTYPE?

Edited February 4, 2009 by dmitriev

Vlad · February 4, 2009

Ответа на этот вопрос аж два:

- никак;

- сотри строку с доктайпом.

dmitriev · February 4, 2009

Все понятно. Спасибо!!!

homm · February 4, 2009

Кому интересно статью нашел тут - http://www.realcoding.net/article/view/525

Всегда интересно почитать свежие статьи за 2002 год.

Sign In

Текст на полупрозрачном фоне

Question

dmitriev

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

dmitriev

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

dmitriev

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information