Jump to content
  • 0

firefox не понимает


faradei21
 Share

Question

В общем вот сайт 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 by faradei21
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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

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

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

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.
Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

Edited by faradei21
Link to comment
Share on other sites

  • 0

Спасибо всем. В общем избавился от 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 by faradei21
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy