отображение слоя в IE при заданном разрешении экрана

[Dasha]

ситуация следующая

———————————————————

Есть панелька, прописанная в основной css'ке в виде слоя.

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

Т.е., к примеру при разрешении экрана 1024 на 768 она отображаться не должна.

ВАЖНО - работать это должно ВО ВСЕХ основных браузерах.

Я прописала такое в ксске:

@media (max-width: 1250px) and (min-width: 300px) {
#panelka { display:none; }
}

#panelka{

    top: 50px;

    width: 100px; 
    height:100px;

    position: absolute;
    left: 10px;
}

сам html файл при этом содержит

<div id="panelka">панелька</div>

в результате ОПЕРА при разрешении выше 1250 показывает панельку, при разрешении ниже - нет. Отлично.

А с инернет эксплорером не получается.

IE у меня 8 версии он показывает эту панельку при любом разрешении экрана, и, судя по тому, что я начиталась, версии до 9той не поддерживают @media,

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

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

Edited July 16, 2012 by Dasha

[gift]

Вы двигались явно в правильном направлении, за исключением того, что IE8 и ниже media queries не поддерживают. Для них придётся городить какой-то джаваскрипт. Поищите плагины, наверняка кто-то уже об этом задумался.

[Dasha]

Вы двигались явно в правильном направлении, за исключением того, что IE8 и ниже media queries не поддерживают. Для них придётся городить какой-то джаваскрипт. Поищите плагины, наверняка кто-то уже об этом задумался.

Так на этом выводе я последнее предложение поста своего и закончила

Искала, но никак не могу допереть, как это сделать фактически на моем примере. Может кто-то все таки знает?

Edited July 17, 2012 by Dasha

[Николя223]

Даша, попробуйте так: )) меня выручало.

<style>
    @media (max-width: 1250px) and (min-width: 300px) {
    #panelka { display:none; }
    }

    #panelka {
    display:block;

    top: 50px;

    width: 100px; 
    height:100px;

    position: absolute;
    left: 10px;
    }
</style>


<DIV id="panelka">содержимое</DIV>

Единственное, в выражении document.write нужно писать всё в одну строку!

<script language="JavaScript1.2">

if (screen.availWidth <= '1250')
{
  document.write('<STYLE>#panelka {display:none;}</STYLE>');
 }
</script>

Edited July 18, 2012 by Николя223

[Dasha]

Даша, попробуйте так: )) меня выручало.

Спасибо, похоже, что и меня выручило.

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

Если мне нужно несколько условий прописать в JS для разных экранов,

то правильно ли я думаю, что заработает вот что:

<script language="JavaScript1.2">
if (screen.availWidth <= '1250')
{
  document.write('<STYLE>#panelka1 {display:none;}#panelka2 {display:none;}</STYLE>');
 }
else if (screen.availWidth >= '1251' && screen.availWidth <= '1350')
{
  document.write('<STYLE>#panelka1 {display:true;}#panelka2 {display:none;}</STYLE>');
 }
else if (screen.availWidth >= '1351')
{
  document.write('<STYLE>#panelka1 {display:none;}#panelka2 {display:true;}</STYLE>');
 }
</script>

Верно?

Edited July 18, 2012 by Dasha

[Николя223]

Верно.

Edited July 18, 2012 by Николя223

[Dasha]

По идее при таком раскладе можно и амедия не прописывать, поставив эти двум дивам по-умолчанию display:none; в ксске

Верно?

Edited July 18, 2012 by Dasha

[Николя223]

я хотел написать, что медиа не прописывать (т.к. это работало в Мазиле, Хроме, explorere), но потом вовремя спохватился: Очень трудно определить как себя поведёт та или иная версия браузера, поэтому я бы @media на всякий пожарный оставил (для подстраховки))) она не много места занимает

[Dasha]

Спасибо, то что нужно.