firefox не понимает

[faradei21]

В общем вот сайт vinilloff.ru

Захожу с мозиллы и при наведении на панель кнопок курсором, анимация появляется в верхнем левом углу экрана. В опере и хроме такого нет.

Вот код:

  .left {
   display: table-cell;
   position: relative;
   width: 150px;
   height: 40px;
   background: transparent url(knopkaleft.png) no-repeat;
   color: #424242;
   vertical-align: middle;
}
   .left span {
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
   background: transparent url(knopkaleft.png) no-repeat;
   background-position: -150px 0;
   opacity: 0;
   width: 150px;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   padding-top: 11px;
}

   .left:hover span {
   opacity: 1;
   color: black;

Это для самой левой кнопки "Главная". В чем проблема? Как подправить код?

И еще одна проблема. Форма обратной связи некорректно отображается (Написать нам). В хроме первая строка, где вводится имя на 1 символ левее, хотя в фаерфоксе и опере такого нет. Если ставить пробел ( ), то в хроме все нормально отображаться будет, а в фаерфоксе и опере наоборот - строка уйдет дальше. Как с этим быть, мастера?

Edited November 29, 2012 by faradei21

[Great Rash]

Смените доктайп с transitional на html5. И исправьте ошибки валидации.

[faradei21]

Все сделал, но это не помогло - ни первой проблеме, ни второй.

[hedgehog]

Насколько я помню, ФФ негативно относится к "position: relative" в ячейках таблицы.

[faradei21]

Я тоже об этом подумал. В общем тут дело стандартов. Кто поддерживает, а кто нет. Опера результаты мне выдает получше чем хром, как ни странно. А мозилла вообще....

[Whatsup]

Я тоже об этом подумал. В общем тут дело стандартов. Кто поддерживает, а кто нет. Опера результаты мне выдает получше чем хром, как ни странно. А мозилла вообще....

А чего получить то хочется ?

Ты посмотри что ты пишешь.

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

Что в итоге мы должны получить ? К какой координате будет привязан элемент ?

<a href="prices.html" class="center3">Цены<span>Цены</span></a>

Вот строка твоего кода. ты делаешь вложенный элемент. блоку ссылке ты задаешь относительное позиционирование, строчному элементу ты задаешь абсолютное позиционирование. Все верно. Но для чего ты задаешь относительное позиционирование display: table-cell; ячейке таблице ?

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

[SelenIT]

Что в итоге мы должны получить ?

Вообще, по стандарту, это должно растянуть элемент на всю ширину и высоту родителя. Но в Fx, да, у табличных элементов есть баг по этой части (частично его можно обойти, но лишь частично).

Другое дело, 1) зачем этот ужас с дублированием текста ссылок (бедные поисковики!), 2) зачем тут вообще таблица?

[Whatsup]

Что в итоге мы должны получить ?

Вообще, по стандарту, это должно растянуть элемент на всю ширину и высоту родителя. Но в Fx, да, у табличных элементов есть баг по этой части (частично его можно обойти, но лишь частично).

Другое дело, 1) зачем этот ужас с дублированием текста ссылок (бедные поисковики!), 2) зачем тут вообще таблица?

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

[SelenIT]

Код не экзотичный, он нелогичный и неконструктивный. Зачем дублировать текст ссылки, если нужно всего лишь изменить ее фон? Зачем хитрое центрирование и растяжение, если размеры известны и фиксированы, а текст однострочный? В конце концов, раз уж используется модный CSS3, почему бы вообще не сделать этот эффект через box-shadow и обойтись вовсе без картинки (и лишнего HTTP-запроса)?

[Whatsup]

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

Подскажи пожалуйста по моему вопросу в этой ветке. Про маргин последнего элемента. Я уверен что есть решение проще моего без добавления лишнего блока.

[faradei21]

table-cell - потому что vertical-align . Мне текст на кнопке по середине надо расположить, а с блочными элементами такого не получается. С картинками для меня лучше, потому что дизайн кнопки могу сам задать. Ладно, пока буду пробовать варианты, которые мне выше предлагали.

Edited November 30, 2012 by faradei21

[faradei21]

Разобрался. Spanы вообще здесь не нужны. Щас делаю только с :hover.

[SelenIT]

текст на кнопке по середине надо расположить

inline-block + line-height?

[faradei21]

Спасибо всем. В общем избавился от span тегов, намного легче стало. В мозилле все заработало.

   
   .left {
   display: table-cell;
   width: 150px;
   height: 40px;
   opacity: 0.8;
   background: url(left.png);
   vertical-align: middle;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}
   .left:hover {
   display: table-cell;
   width: 150px;
   height: 40px;
   opacity: 1;
   background: url(left.png);
   vertical-align: middle;
}

Edited November 30, 2012 by faradei21