Табицы стилей для определённых браузеров

[Goldsnich]

Скажите, пожалуйста, как можно задать стили элементов на странице только для определённого браузера ? Конкретно меня интересует Opera, потомучто в нём картинка rss и логотип находятся в неправильном месте. А я подстраивала CSS для Firefox и Chromium, там всё нормально. Вот стиль, описывающий иконку rss

#content a.feed-icon {
  float: none; /* LTR */
  margin-top: -5px;
  position: relative;
  bottom: 36px;
  top: 10%;
  left: 202%;
  z-index: 1;
}

Этот стиль находится во внешней таблице, вот как мне теперь сделать чтоб этот стиль игнорировался Opera и использовался альтернативный ? Вот альтернативный CSS:

@media all and (min-width: 0) { 
#content a.feed-icon {
  float: none; /* LTR */
  margin-top: -2px;
  position: relative;
  bottom: 16px;
  top: 10%;
  left: 202%;
  z-index: 1;
}

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

Edited August 18, 2011 by Goldsnich

[CalvinKlein]

Для IE можно с помощью условных коментариев

<!--[if lte IE 6]>
<![endif]-->

для остальных браузеров через JavaScript

var _ua = navigator.userAgent.toLowerCase();
var browser = {
  version: (_ua.match( /.+(?:me|ox|on|rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
  opera: /opera/i.test(_ua),
  msie: (/msie/i.test(_ua) && !/opera/i.test(_ua)),
  msie6: (/msie 6/i.test(_ua) && !/opera/i.test(_ua)),
  msie7: (/msie 7/i.test(_ua) && !/opera/i.test(_ua)),
  msie8: (/msie 8/i.test(_ua) && !/opera/i.test(_ua)),
  msie9: (/msie 9/i.test(_ua) && !/opera/i.test(_ua)),
  mozilla: /firefox/i.test(_ua),
  chrome: /chrome/i.test(_ua),
  safari: (!(/chrome/i.test(_ua)) && /webkit|safari|khtml/i.test(_ua)),
  iphone: /iphone/i.test(_ua),
  ipod: /ipod/i.test(_ua),
  iphone4: /iphone.*OS 4/i.test(_ua),
  ipod4: /ipod.*OS 4/i.test(_ua),
  ipad: /ipad/i.test(_ua),
  safari_mobile: /iphone|ipod|ipad/i.test(_ua),
  opera_mobile: /opera mini|opera mobi/i.test(_ua),
  mobile: /iphone|ipod|ipad|opera mini|opera mobi/i.test(_ua),
  mac: /mac/i.test(_ua)
};

вытащил из контакта скрипт.

конкретно для Opera

if( /opera/i.test(navigator.userAgent.toLowerCase()) )
{
  /* — */
}

[Goldsnich]

Извините за нубность, а где здесь подключение моей альтернативной таблицы ?

Вот у меня внешняя CSS, style.css там стили оформления, можно просто туда прописать альтернативный стиль для какого-то элемента и сопоставить ему браузер ?

Если использовать ваш скрипт java, это я так понимаю что нужно его где-то внедрить в html страницу, а где путь к таблице css ? Это ?

opera: /opera/i.test(_ua)

[CalvinKlein]

Во-первых не Java, а JavaScript!

А во-вторых вам ведь всего-лишь одно свойство поменять marginTop;

if( /opera/i.test(navigator.userAgent.toLowerCase()) )
{
  document.getElementsByClassName(".feed-icon")[0].style.marginTop = "-2px";
}

Edited August 18, 2011 by CalvinKlein

[Goldsnich]

Извините, на самом деле marginTop на распположение не влияет, нужно изменить стиль top и присвоить ему -50px

Тоесть альтернативная таблица для Opera должна быть такая:

#content a.feed-icon {
  float: none; /* LTR */
  margin-top: -25px;
  position: relative;
  bottom: 6px;
  top: -50px;
  left: 202%;
  z-index: 1;
}

По вашему примеру вставила в страницу такой код, но он не отрабатывает почему-то, (в Opera Javasсript включен разумeeтся)

<script type="text/javascript" language="JavaScript"> 
if( /opera/i.test(navigator.userAgent.toLowerCase()) )
{
  document.getElementsByClassName(".feed-icon")[0].style.top = "-50px";
}
</script>

Edited August 18, 2011 by Goldsnich

[CalvinKlein]

Извините, на самом деле marginTop на распположение не влияет, нужно изменить стиль top и присвоить ему -50px

Тоесть альтернативная таблица для Opera должна быть такая:

#content a.feed-icon {
  float: none; /* LTR */
  margin-top: -25px;
  position: relative;
  bottom: 6px;
  top: -50px;
  left: 202%;
  z-index: 1;
}

По вашему примеру вставила в страницу такой код, но он не отрабатывает почему-то, (в Opera Javasсript включен разумeeтся)

<script type="text/javascript" language="JavaScript"> 
if( /opera/i.test(navigator.userAgent.toLowerCase()) )
{
  document.getElementsByClassName(".feed-icon")[0].style.top = "-50px";
}
</script>

Извиняюсь, метод не так работает, лучше присвоить элементу id и писать так

<script type="text/javascript" language="JavaScript"> 
if( /opera/i.test(navigator.userAgent.toLowerCase()) )
{
  document.getElementById("id элемента").style.top = "-50px";
}
</script>

Edited August 18, 2011 by CalvinKlein

[SelenIT]

Разделение стилей по браузерам — это крайний отчаянный выход, вроде ампутации с установкой протеза. Не надо прибегать к нему там, где достаточно смазать йодом и заклеить пластырем . Ваша проблема — не от косячности Оперы (хотя косяки у нее и есть), а от излишней сложности стилей. Заставлять несчастную кнопку одновременно сползать на 36px вверх и на 10% вниз, да еще на 5px налезать на верхнего соседа, да еще убраться вправо за любые мыслимые границы — от такой кучи взаимоисключающих требований кому угодно башню снесет, не только "капризной северной красавице" . Попробуйте просто убирать лишние правила одно за другим, в какой-то момент браузеры наверняка придут к консенсусу. А лучше просто покажите, чего хотите добиться — наверняка вам подскажут простое надежное решение без таких подвыподвертов...

[Goldsnich]

SelenIT, Да вроде бы ничего сложного, всего-то сместить картинку на несколько пикселей, кстати, чего-то всё равно не получилось с такой конструкцией:

<script type="text/javascript" language="JavaScript"> 
if( /opera/i.test(navigator.userAgent.toLowerCase()) )
{
  document.getElementById("id элемента").style.top = "-50px";
}
</script>

Но потом немного поковыряв CSS, более или менее в Opera стало отображаться верно после задания вместо процентов, фактического расположения в пикселях. (top: -50px;), остальные браузеры отреагировали небольшим смещением, что не кретично. Но всёже, хотелось бы припасти такой рабочий скриптик, на случай "если уже совсем никак".

p.s. Кстати, будующий сайт на Drupal 7, может я не туда код вставляю ? Пробую в page.tpl.php, в самый вверх.

[CalvinKlein]

SelenIT, Да вроде бы ничего сложного, всего-то сместить картинку на несколько пикселей, кстати, чего-то всё равно не получилось с такой конструкцией:

<script type="text/javascript" language="JavaScript"> 
if( /opera/i.test(navigator.userAgent.toLowerCase()) )
{
  document.getElementById("id элемента").style.top = "-50px";
}
</script>

Но потом немного поковыряв CSS, более или менее в Opera стало отображаться верно после задания вместо процентов, фактического расположения в пикселях. (top: -50px;), остальные браузеры отреагировали небольшим смещением, что не кретично. Но всёже, хотелось бы припасти такой рабочий скриптик, на случай "если уже совсем никак".

p.s. Кстати, будующий сайт на Drupal 7, может я не туда код вставляю ? Пробую в page.tpl.php, в самый вверх.

Скрипт рабочий, просто его надо запускать по событию onDomReady, ну или вставить его в конец файла