Форум PHP программистов > JS background gradient IE6 ошибка

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: JS background gradient IE6 ошибка

freeze

9.06.2012 - 11:19

Проблема в том что при попытке вставить в стиль параметры, IE6 отображает ошибку, в JS коде.
Помогите убрать ошибку.

Свернутый текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Числа</title>
  <style type="text/css">
   body {
    
  background: url('http://foto.mil.new.ir/photo/normal/c1/p10.jpg') no-repeat;
  background-position: 0 20px;
   }
   div.menu {
    float:left;
    height: 700px;
    width: 200px;
    padding-top: 40px;
   }
   table {
       border: 2px inset pink;
       margin-top: 20px;
   }
   table th {
      background: #AEDE74;
   }
   table tr.odd {
      background: #ebd3d7;
   }
   

   .tabs th{
      height: 50px;
      /*
      background: #FBF8DE;
      background: -o-linear-gradient(bottom, #FFEABD, #FFF3DE 90%);
      background: -moz-linear-gradient(bottom, #FFEABD, #FFF3DE 90%);
      background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFEABD), color-stop(0.90, #FFF3DE));*/
   }
   .tabs th:hover{
      background: yellow;
      cursor: pointer;
   }
   .tabs th:active{
      background: pink;
   }
   
   .footer {
     margin-left: 550px;
   }
  </style>


  
 </head>
 <body>
  <div class="menu">
    <ul>
      <li>Главная</li>
      <li>Новости</li>
      <li>Контакты</li>
    </ul>
  </div>

    <table cellpadding="5">
    <tr>
        <th> наименование </th>
        <th>общее впечатление</th>
        <th>оценить по критериям</th>
        <th>оставить коментарий (отзыв)</th>
    </tr>
    <tr class="odd">
        <td>Злато</td>
        <td>3</td>
        <td>2</td>
        <td>не плохо</td>
    <tr>
        <td>Идеал</td>
        <td>3</td>
        <td>4</td>
        <td>плохо</td>
    </tr>
    <tr class="odd">
        <td>Слобода</td>
        <td>3</td>
        <td>2</td>
        <td>не плохо</td>
    </tr>
    <tr>
        <td>Олейна</td>
        <td>3</td>
        <td>2</td>
        <td>не плохо</td>
    </tr>
    <tr class="odd">
        <td>другое</td>
        <td>3</td>
        <td>2</td>
        <td>не плохо</td>
    </tr>
    </table>
    
    <table class="tabs">
      <tr id="myselect">
        <th>главная</th>
        <th>новости</th>
        <th>контакты</th>
      </tr>
      <tr class="odd">
        <td>тест</td>
        <td>тест</td>
        <td>тест</td>
      </tr>
      <tr>
        <td>тест</td>
        <td>тест</td>
        <td>тест</td>
      </tr>
      <tr class="odd">
        <td>тест</td>
        <td>тест</td>
        <td>тест</td>
      </tr>
    </table>
    
  <p class="footer">Ля-Ля-Ля™<br>Ля-Ля-Ля™<br></p>
    <script>
    var table_th = document.getElementById('myselect').getElementsByTagName('th');
    for(var i = 0; i < table_th.length; ++i)
    {
        table_th[i].style.background = '#FBF8DE';
        table_th[i].style.background = '-o-linear-gradient(bottom, #FFEABD, #FFF3DE 90%)';
        table_th[i].style.background = '-moz-linear-gradient(bottom, #FFEABD, #FFF3DE 90%)';
        table_th[i].style.background = '-webkit-gradient(linear, left bottom, left top, color-stop(0, #FFEABD), color-stop(0.90, #FFF3DE))';
    }
  </script>
 </body>
</html>

Спустя 11 минут, 32 секунды (9.06.2012 - 10:31) redreem написал(а):

1. какой смыл IE6 заставлять отобразить CSS3?
2. из 4-х строк table_th[i].style.background = '... актуальной останется лишь последняя. какой смысл в предыдущих 3-х?

Спустя 3 минуты, 38 секунд (9.06.2012 - 10:34) redreem написал(а):

вобще на IE можно так проверять:

if (-[1,]) {
			
	//тут код для нормальных браузеров
			
} else {
		
	//тут код для ишака
			
}

Спустя 2 дня, 11 часов, 20 минут, 18 секунд (11.06.2012 - 21:55) freeze написал(а):

По поводу ошибки, меня в принципе не устраивает что она выдаётся.

Цитата (redreem @ 9.06.2012 - 07:31)

2. из 4-х строк table_th[i].style.background = '... актуальной останется лишь последняя. какой смысл в предыдущих 3-х?

как правильно написать чтобы работало? += ???

Спустя 34 минуты, 51 секунда (11.06.2012 - 22:29) redreem написал(а):

ну видимо селектором определения браузера:

var b = bowserType(); //функция определения браузера (в нете куча)

switch (b) {
 case <идентификатор IE>:
  table_th[i].style.background = '#FBF8DE';
  break;
 case <идентификатор opera>:
  table_th[i].style.background = '-o-linear-gradient(bottom, #FFEABD, #FFF3DE 90%)';
  break;
 case <идентификатор FF>:
  table_th[i].style.background = '-moz-linear-gradient(bottom, #FFEABD, #FFF3DE 90%)';
  break;
 case <идентификатор вебкитовского движка>:
  table_th[i].style.background = '-webkit-gradient(linear, left bottom, left top, color-stop(0, #FFEABD), color-stop(0.90, #FFF3DE))';
  break;
 default:
  <CSS3 синтаксис>
  break;
}

Спустя 10 часов, 50 минут, 35 секунд (12.06.2012 - 09:20) freeze написал(а):

к примеру, в стилях:

Свернутый текст

td#grad
{
background: #FBF8DE;
background: -moz-linear-gradient(bottom, #FFEABD, #FFF3DE 90%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFEABD), color-stop(0.90, #FFF3DE));
}

Оно ведь тут работает, как эти же строчки написать в JS чтобы был такой же эффект как в стилях? разве так низя?:)

Спустя 6 минут, 43 секунды (12.06.2012 - 09:27) redreem написал(а):

Цитата

ведь тут работает

работает? не уверен. т.е. в FF и в Chrome ты видишь градиент?
скинь веб-архив странички, даж интересно стало как это такое может работать в CSS.

Спустя 1 минута, 50 секунд (12.06.2012 - 09:29) redreem написал(а):

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

Спустя 17 минут, 8 секунд (12.06.2012 - 09:46) freeze написал(а):

судя по твоим суждениям, вот этот код работать не будет, будет лишь работать только последняя строчка?

Свернутый текст


   .tabs th{
      height: 50px;
      
      background: #FBF8DE;
      background: -o-linear-gradient(bottom, #FFEABD, #FFF3DE 90%);
      background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFEABD), color-stop(0.90, #FFF3DE));
      background: -moz-linear-gradient(bottom, #FFEABD, #FFF3DE 90%);
      
   }

поэкспериментируй, с кодом из первого топика, градиент там появляется на посл. таблице

Спустя 16 минут, 13 секунд (12.06.2012 - 10:02) redreem написал(а):

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

Спустя 6 минут, 12 секунд (12.06.2012 - 10:08) bodja написал(а):

freeze
Вот это все

-o-linear-gradient
-webkit-gradient
-moz-linear-gradient

пока переходные стандарты стилей,потом это все должно переити типа в

table_th[i].style.background.gradient=значение.

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

Быстрый ответ:

Здесь расположена полная версия этой страницы.