CSS-хаки

[people2010]

Скажите для того чтоб задавать дял браузера ИЕ для опр. классов опред. свойства для версий Ие:

* IE 6 — * html

* IE 7 — *+html

А что использовать для 8ой версии тогда?

[stars]

)))) попробуйте условные комментарии для ie использовать

[npofopr]

вы поисковыми системами то хоть пользуетесь? или сразу в форум?

на хабре хотя бы почитайте.

Edited September 16, 2010 by npofopr

[psywalker]

people2010

Дружище, ты когда нибудь учиться начнёшь или так и будешь задавать вопросы с первой найденой странице запроса любого поисковика?

[swetlana]

Макс, да не стремай ты бедолагу. Он таким как я самооценку поднимает Это ж можно рассказать кой-чего по азам и почувствовать себя ой каким умным

[psywalker]

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

[people2010]

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

Если написать так, будет 2 раза выводиться текст на картинке, а мне нужно 1 раз.

<span style="position:absolute; top:725px; left:35px; 
 font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;">
 Для женщин</span>

 <!--[if IE]>
 <span style="position:absolute; top:705px; left:35px; 
 font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;">
 Для женщин</span>
 <![endif]-->

Edited September 16, 2010 by people2010

[psywalker]

1) Начнём с тобой, что ты неправильно пишешь заголовки условных комментарий <!--[if IE6]>, нужно писать так: <!--[if IE 6]>.

Потом почему перед свойством стоят кавычки "position:absolute; ?

Самый ППЦ просто, я поражаюсь, к какому селектору ты обращаешься???

Ну и в третьих инлайн стили ближе к тексту, поэтому они перебьют все твои правила для ИЕ

2) Можно. Для ИЕ6 пишешь через * html, для ИЕ7 через *+ html, а для ИЕ8 будет всё остальное

Твой пост меня убил, я в шоке над табой

[people2010]

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

Edited September 16, 2010 by people2010

[psywalker]

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

[people2010]

Да, читаю вроде.

Из поста 7-го код работает, но 2 раза выводит текст, почему ,я же поставил условного?

Вот так выводит 2 раза один и тот же текст.

<span style="position:absolute; top:725px; left:35px; 
 font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;">
 Для женщин</span>

 <!--[if gte IE 6]>
 <span style="position:absolute; top:705px; left:35px; 
 font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;">
 Для женщин</span>
 <![endif]-->

Edited September 16, 2010 by people2010

[Searcher]

people2010, все технические дисциплины основаны на общих принципах логики. Верстка - техническая дисциплина. А вы, видимо, гуманитарий.

Ну идеотизм ведь! Вы сначала для всех броузеров в т.ч. и ИЕ6 выводите эту надпись, а потом еще и для ИЕ6 добавляете. Думайте логически! Естественно в ИЕ6 будет повторение.

Если таким образом нельзя сделать - ищите другие варианты. Условные комментарии можно ведь располагать в любом месте кода, значит вы можете отделить при помощи условных комментариев стили. Можно подгрузить отдельный файл стилей для ИЕ, или описать отдельную таблицу стилей для ИЕ прямо в header. Значит что делаем?

Для всех добавляем в разделе head такой стиль:

<style type="text/css">
...ну тут какие-то еще стили...
.yourSpan {position:absolute; top:725px; left:35px; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;}
...ну тут какие-то еще стили...
</style>

а потом добавляем отдельные стили для ИЕ:

<!--[if IE]>
.yourSpan {top:705px;}
<![endif]-->

а в html уже соответственно пишем:

<span class="yourSpan">Для женщин</span>

[people2010]

точно, вот так сработало.

Содержимое в отд. файле ксс:

.textpos1{position:absolute; top:725px; left:35px; 
 font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;}

код хтмл:

 <!--[if gte IE 6]>
 <style type="text/css">
 .textpos1{top:710px;}
 </style>
 <![endif]-->	   
<span class="textpos1">Для женщин</span>

Edited September 16, 2010 by people2010

[people2010]

Вот так сработало для мозилы,только не понятно что это такое: html:root

html:root .textpos1{position:absolute; top:721px; left:35px; 
 font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;}

А в гуглхроме вверх занесло, как в гуглхроме исправить?

Edited September 16, 2010 by people2010

[people2010]

Как поставить условный коментарий в гуглхроме, и как поставить в браузере опера, выше версии 9,22(кроме 9,22),

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

[people2010]

Попробовал сейчас написать без условных комментариев.

Написать в стилях опробовал такое:

.textpos1{position:absolute; top:710px; left:35px; 
font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;}

В хтмл поробовал такое:

<span class="textpos1">Для женщин</span>

Работает в ИЕ6,Ие7,ИЕ8,Опера9,22, Опера 9,63

Не работает:

Мозила, ГУГХРОм.

Что делать?

[swetlana]

Скажите, пожалуйста, что вы делаете такого, что у вас получается разное отображение в Опере, ие8, Мозилле и Хроме?

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

[people2010]

Упростил решение вот так и всё заработало на всех браузерах, проверял.

.title{height:34px; background:url(img/video.png) no-repeat;
border:1px solid black;}
.textpos1{
padding-top:7px; display:block; padding-left:7px; font-size:15px;
font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;}

<div class='title'><span class="textpos2">Текст</span></div>

Хотя странно, что свойство position везде работает по разному.

Вывод:

1) не использовать вообще: position:relative потому-что пр и уменьшении окна браузера то что им размещено

отображается в разных местах браузера, чем меньше уменьшил окно браузера тем полетит вправо или влево то, что ты им

с позиционировал

2)Не использовать: position:absolute; иначе будет отображаться во всех версиях Ие одинаково, включая оперу,

но будет отображаться по другому в ГУГЛХРОм и третьему МОЗИЛА, во всех версиях будет отображаться по другому.

3)Использовать маргин и паддинг для выхода из таких ситуаций и будет отображаться в:

Opera 9.22, 9.63,IE - 6,7,8,Mozila,GoogleChrome,Netskape и даже Safari одинаково.

Если я в чём-то не прав, напишите как position:absolute использовать так,чтоб во всех браузерах

отступало одинаково то,что я им позиционирую

Edited September 16, 2010 by people2010

[hf3]

Вы наверное просто не правильно выбираeтe от какой границы и какого элемента делать position:relative либо абсолют.

Практикуйтесь больше и все получитс я

Откройте к пример главную страницу Рамблера и сверстайте её дивами полностью сами. Пусть уйдет неделя - зато опыт получите неплохой

[stars]

Вы наверное просто не правильно выбираeтe от какой границы и какого элемента делать position:relative либо абсолют.

Практикуйтесь больше и все получитс я

Откройте к пример главную страницу Рамблера и сверстайте её дивами полностью сами. Пусть уйдет неделя - зато опыт получите неплохой

Очень сомнительно данный субъект на протяжении месяца точно осыпает форум всевозможными вопросами и какой-то положительной динамики в самообразовании пока не заметно...

[swetlana]

people2010, вообще-то про position хорошо описано в документации.

В том числе и на htmlbook.ru хорошо описано.

Но раз читают только задроты-ботаники, а чисца риальные поцаны сразу запрашивают решение на форумах, то попробую чуть-чуть рассказать.

position: relative — означает, что элемент будет сдвинут относительно того положения, в котором он должен был находиться при position: static. Величина сдвига задаётся такими свойствами, как left, right, top, bottom. При этом за элементом резервируется то место, которое он должен был занимать без этого изврата. Другие элементы по умолчанию не могут его занять. Данное свойство работает с ошибкой в древних версиях IE, по 7 включительно: при изменении ширины окна элемент с position:relative остаётся на фиксированном расстоянии от левого края окна независимо от того, должно ли это быть так по задумке разработчика.

position:absolute — означает, что элемент будет расположен в определённом месте относительно родительского, или прародительского, в общем ближайшего сверху по иерархии DOM элемента с position: absolute или relative. Если сверху по иерархии таковых не находится до самого корня, то отсчёт идёт от границ окна. Место для такого элемента не резервируется, он в любом случае располагается поверх остальных элементов. Глюков в работе этого свойства пока что замечено не было.

[npofopr]

Очень сомнительно данный субъект на протяжении месяца точно осыпает форум всевозможными вопросами

и не только этот форум осыпается)