Sign in to follow this  
JIucky

Несколько классов у тэга?

Recommended Posts

По субжу, можно ли IE6 обучить такой магией?

p/s: у меня шо то не хотит понимать! :)

Да, у ИЕ6 есть такая особенность. А покажи пример, что именно не пашет. Пример на отдельной странице.

Вот например такой вариант пашет а ИЕ6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.a { color: red;}
.b.a { color: blue;}
</style>
</head>

<body>
<h1 class="b a">Заголовок</h1>
<h1 class="a b">Заголовок</h1>
</body>
</html>

Ие6 руководствуется последним классом, если например ты напишешь так, то уже обломаешься

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.a { color: red;}
.b.a { color: blue;}
</style>
</head>

<body>
<h1 class="a">Заголовок</h1>
<h1 class="a b">Заголовок</h1>
</body>
</html>

Т.е. класс .а отдельно уже просто будет игнорить красный цвет.

Share this post


Link to post
Share on other sites

У меня ситуация такая:

<div class="rb">тута текст какой-то!</div>
<div class="rb none">тута снова текст какой-то!</div>

<style>
.rb{
width:200px;
float:left;
margin:0 15px 20px 0;
background:url(../images/border.gif) repeat-x bottom;
}

.rb.none{
margin:0 0 20px 0;
}
</style>

И вот <div class="rb none"> не отображает фон почему-то! Я попробовал сделать так:

.rb.none{
margin:0 0 20px 0;
background:url(../images/border.gif) repeat-x bottom;
}

Но чо то не помогло.

Share this post


Link to post
Share on other sites

У меня всё пашет

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.rb{
width:200px;
float:left;
margin:0 15px 20px 0;
background: red;
}

.rb.none{
margin:0 0 20px 0;
background: blue;
}
</style>
</head>

<body>
<div class="rb">тута текст какой-то!</div>
<div class="rb none">тута снова текст какой-то!</div>
</body>
</html>

Share this post


Link to post
Share on other sites

я попробовала с фоновой картинкой проверить, так вот дело в пути. Если путь обозначить

background:url(images/sq1.jpg) repeat-x bottom;

то все работает, как только добавляется "../" в начале, IE6 перестает понимать путь. Из-за чего - не знаю. Переноси картинки в другую директорию, чтоб без "../" обращаться.

Edited by Aurica

Share this post


Link to post
Share on other sites
я попробовала с фоновой картинкой проверить, так вот дело в пути. Если путь обозначить
background:url(images/sq1.jpg) repeat-x bottom;

то все работает, как только добавляется "../" в начале, IE6 перестает понимать путь. Из-за чего - не знаю. Переноси картинки в другую директорию, чтоб без "../" обращаться.

Это потому что картинка у вас лежит в папки "images" относительно корня сайта и корректный адрес к ней именно такой "images/sq1.jpg", а если добавить к адресу "../", то браузер будет искать её относительно таблицы стилей.

Share this post


Link to post
Share on other sites
У меня всё пашет

А у меня где-то пашет такая конструкция, а где-то нет! Сейчас юзаю multipleIE, задрал тестер со своими ошибками. :)

я попробовала с фоновой картинкой проверить, так вот дело в пути.

Танцы с бубном в полнолуние тоже помогают!)

Share this post


Link to post
Share on other sites

В IE6 вроде как имеются проблемы с множественными классами. Вычитал, что применяется только последний класс в цепочке a.b.c, остальные игнорируются. Но мне никак не удалось получить эту ошибку на практике. То ли она проявляется при некоторых условиях, то ли IETester врет.

Share this post


Link to post
Share on other sites
Это потому что картинка у вас лежит в папки "images" относительно корня сайта и корректный адрес к ней именно такой "images/sq1.jpg", а если добавить к адресу "../", то браузер будет искать её относительно таблицы стилей.

:) Естественно, картинка у меня была в обоих местах: - и в корне сайта и на уровень выше. И относительные адреса, слава богу, люблю использовать, особенно в far без них намаешься.

Я видела такие варианты, когда люди некоторые картинки убирали с корня сайта (или с любой другой папки внутри сайта) на уровень выше (самого корня сайта), хотя не понимаю зачем. К сожалению, тогда не проверяла работает ли в IE6.

images/
корень сайта/
images/
1.html (стили определены в самом файле).

images/
корень сайта/
css/
images/
1.html

images/
корень сайта/
images/
test/
css/
1.html

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

Автор ведь не уточнял где его картинка лежит.

Если у кого-то по-другому - напишите.

Edited by Aurica

Share this post


Link to post
Share on other sites
В IE6 вроде как имеются проблемы с множественными классами. Вычитал, что применяется только последний класс в цепочке a.b.c, остальные игнорируются. Но мне никак не удалось получить эту ошибку на практике. То ли она проявляется при некоторых условиях, то ли IETester врет.

Как это не удаётся, я же выше привёл решения с ошибкой и без. :)

А чо бы не поставить пробел между именами классов?

.rb .none {
margin:0 0 20px 0;
}

А нахрена? Ведь это же уже совсем другая песня?

Share this post


Link to post
Share on other sites

Попробуй в .rb .none использовать не картинку а просто цвет блоку поменять, если меняется значит проблема именно в картинке, или в путях к ней.

Рекомендую все внутренние ссылки всегда прописывать от корня сайта т.е. с / вот таким образом - background:url(/images/border.gif) repeat-x bottom;

Тогда не будет путаницы с путями.

Share this post


Link to post
Share on other sites
А нахрена? Ведь это же уже совсем другая песня?

Да нет, все та же.

UPD: а не, пардон, ошибся.

UPD2: а почему не задать классы на разных строках?

div .rb{
width:200px;
float:left;
margin:0 15px 20px 0;
background: red;
}

div .none{
margin:0 0 20px 0;
background: blue;
}

Share this post


Link to post
Share on other sites
Да, у ИЕ6 есть такая особенность. А покажи пример, что именно не пашет. Пример на отдельной странице.

Вот например такой вариант пашет а ИЕ6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.a { color: red;}
.b.a { color: blue;}
</style>
</head>

<body>
<h1 class="b a">Заголовок</h1>
<h1 class="a b">Заголовок</h1>
</body>
</html>

Ие6 руководствуется последним классом, если например ты напишешь так, то уже обломаешься

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.a { color: red;}
.b.a { color: blue;}
</style>
</head>

<body>
<h1 class="a">Заголовок</h1>
<h1 class="a b">Заголовок</h1>
</body>
</html>

Т.е. класс .а отдельно уже просто будет игнорить красный цвет.

Такой совет напутствие: если поддерживаете ие6, то .b.a { color: blue;} так вот лучше не писать вообще! напишите .a { color: blue;}

Так как ие6 реагирует только на последний класс.

А такая форма записи (.a { color: blue;}) сразу гарантирует что ие6 будет принимать стили так же как и все браузеры.

Share this post


Link to post
Share on other sites

Разобрался в чем дело было! У меня были один и тот же класс (.none) у нескольких блоков, хотя стили я задавал уникальные, т.е. у каждого .none был родитель:

<div class="rb none">...</div>
<div class="class2 none">...</div>
<div class="class3 none">...</div>
....
<style type="text/css">
.rb{
стили
}
.rb.none{
стили
}
.сlass2.none{
снова стили
}
.сlass3.none{
и опять стили и еще background:none;
}

Но ИЕ6 почему-то понимал .none как общий стиль, как у меня и получилось, шо к .rb.none применялись стили от .сlass3.none!

UPD2: а почему не задать классы на разных строках?

Можно и так, разницы нет!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,700
    Total Members
    3,128
    Most Online
    VovkaKrut
    Newest Member
    VovkaKrut
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.