FireFox - Не полная поддержка CSS?

In$ane · №1

Как я недавно обнаружил, FireFox не обрабатывает (не правильно обрабатывает) некоторые элементы CSS, из-за чего некоторые страницы отображаются не верно :cry:
Если заглянуть сюда - http://www.w3c.org/Style/CSS/#browsers - мы увидим, что из подтвержденно поддерживающих CSS последняя это Mozilla 1.6, возможно, создатели FireFox просто еще не успели подать заявку в W3C, но факт остается фактом...

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

А сюда я прикладываю картинку, на ней видно, что обработка у IE6 и FF разная, но правильно отображается у IE (выделенный элемент)
К тому же полоса прокрутки у FF не изменила своего вида (но, вроде, такое только в IE и можно, так что ошибкой это назвать нельзя)...

Balancer · №2

Дай ссылку на точный код.

Swappp · №3

In$ane
Обработка CSS у Gecko конечно не идеальная, на некоторых фрагментах ведет себя не совсем понятно (недавно у меня рамки почему-то отображались точками, а не solid, хотя при перерисовке (прокрутка, наведение мышкой на елементы с :hover и т.д.) все вставало на места), но IE еще хуже... Я даже не говорю, что он поддерживает только малую часть из CSS2.
Так что не факт, что в IE правильное отображение.
А на счет http://www.w3c.org/Style/CSS/#browsers ff это наследник Mozilla, движок то один, и врядли Mozilla 1.7.x поддерживает CSS хуже Mozilla 1.6... Просто сама страничка с новостями редко обновляется
И как сказал Balancer, нужен код, что то мне подсказывает, что использовались приемы обхода глюков и недочетов IE (именно после устранения неточностей в IE я получал новые, но уже в FF)...

Digital Mirror · №4

поставь в FF плагин WebDeveloper, там есть все необходимое чтобы выявить где ошибки и кривой код

In$ane · №5

поставь в FF плагин WebDeveloper, там есть все необходимое чтобы выявить где ошибки и кривой код

А ссылочкой не поделитесь?

Дай ссылку на точный код.

Вот кусок кода CSS:

Выделить код

Код:

.menu2 &#123;
	 TEXT-ALIGN&#58; left; PADDING-RIGHT&#58; 3px; PADDING-LEFT&#58; 3px; FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 10px; BACKGROUND&#58; #EEEEEE; PADDING-BOTTOM&#58; 3px; WIDTH&#58; 100%; COLOR&#58; #000055; PADDING-TOP&#58; 3px; FONT-FAMILY&#58; tahoma, verdana, helvetica, sans-serif; HEIGHT&#58; 100%
&#125;
.menu2&#58;hover &#123;
	BACKGROUND&#58; #FFFFFF; COLOR&#58; #6600AA; TEXT-DECORATION&#58; none
&#125;
.menu &#123;
	HEIGHT&#58; 18px; TEXT-ALIGN&#58; right; text-valign&#58; middle
&#125;

А вот самого файла:

Выделить код

Код:

<TABLE cellSpacing=0 cellPadding=0 border=0><tr>
<td bgColor=#000000 width=1></td>
<td class=menu><A class=menu2 href=modules.php?name=GTA>GRAND THEFT AUTO</A></td>
<td bgColor=#000000 width=1></td>
<td class=menu><A class=menu2 href=modules.php?name=MAFIA>MAFIA</A></td>
...
<td class=menu><A class=menu2 href=modules.php?name=GP>GRAND PRIX</A></td>
<td bgColor=#000000 width=1></td>
<td class=menu><A class=menu2 href=modules.php?name=CARMA>CARMAGEDDON</A></td>
<td bgColor=#000000 width=1></td></tr>
<tr><td bgColor=#000000 width=1 colspan=17></td></tr>
<tr><td bgColor=#000000 width=1></td>
<td class=menu><A class=menu2 href=modules.php?name=MM>MIDTOWN MADNESS</A></td>
<td bgColor=#000000 width=1></td>
<td class=menu><A class=menu2 href=modules.php?name=RACER>RACER</A></td>
...
<td class=menu><A class=menu2 href=modules.php?name=F1>FORMULA-1</A></td>
<td bgColor=#000000 width=1></td>
<td class=menu><A class=menu2 href=modules.php?name=TM>TRACKMANIA</A></td>
<td bgColor=#000000 width=1></td></tr></table>

Думаю, что тут ничего сложного...

К тому же при рефреше в ФФ бывает просто ужасно срабатывает этот кусок, и показывается полуобрезанная первая строка, с совсем другим шрифтом и т.д., как будто CSS игнорируется вовсе!

Balancer · №6

Зато сразу видно, что валидатор ты и близко к своему коду не подпускаешь. Ладно, я молчу про "Property text-valign doesn't exist : middle" но второй фрагмент показывает, что человек его писавший если когда-то валидатор и запускал, то только для теста, один раз, и потом убрал в дальний угол

Balancer · №7

Кстати, если по ошибке - то тут УНВП.

Ты бэкграунд задаёшь только для тэга "a", а не для всего "td", так что когда тэг занимает в ширину не всю ячейку, бэкграунд и не закрашивается до конца. Поскольку у тебя выравнивание вправо, то слева остаётся незакрашенный кусок. FF тут действует логично. Почему IE всё закрашивает - см. замечание в параллельном топике. Если в IE прописать первой строкой:

Выделить код

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html401/loose.dtd">

то он тоже начинает закрашивать как Firefox

Balancer · №8

Кстати, покопался я тут в CSS на тему решения твоей проблемы (чтобы валидно закрашивать весь бэкграунд таблицы, не только часть, перекрываемую по тэгу "a") простого решения этой задачи нет. Или на каждую "td" вешать javascript на события onmouseover и onmouseout с динамическим изменением стиля, или использовать CSS2, который... не поддерживается IE (в firefox с этим всё ок)

In$ane · №9

Зато сразу видно, что валидатор ты и близко к своему коду не подпускаешь. Ладно, я молчу про "Property text-valign doesn't exist : middle" но второй фрагмент показывает, что человек его писавший если когда-то валидатор и запускал, то только для теста, один раз, и потом убрал в дальний угол

Код не мой За CSS отвечал не я, мне лишь надо было подогнать дизайн к движку и отвечать уже за сам движок, а так как в IE это выглядело более чем хорошо, то я даже не удосужился пройтись валидатором :-/
Кстати, не дашь ссылочку на хороший валидатор? А то у меня есть какой-то, но он обглюченный сильно...

простого решения этой задачи нет. Или на каждую "td" вешать javascript на события onmouseover и onmouseout с динамическим изменением стиля, или использовать CSS2, который... не поддерживается IE Smile (в firefox с этим всё ок)

ГЫ! Или оставить все как есть, потому как так в IE все прекрасно, а 93% юзеров моего сайта - пользователи IE
Ну а если серьезно, то надо искать решение... твой вариант не очень удобен, уж лучше я сделаю это меню на Flash, меньше проблем будет
Кстати, где можно почитать о CSS2 (желательно на русском), да и поподробнее о CSS1 (тоже на русском), не подскажешь?

Swappp · №10

In$ane
:offtop:

TEXT-ALIGN: left; PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-WEIGHT: bold; FONT-SIZE: 10px; BACKGROUND: #EEEEEE; PADDING-BOTTOM: 3px; WIDTH: 100%; COLOR: #000055; PADDING-TOP: 3px;

Веселый код а элементарно оптимизировать нельзя? хотя-бы padding: 3px;

<td bgColor=#000000 width=1></td>

зачем??? Это новый способ записи "border: 1px solid #000"?

А теперь по делу.
Balancer

Кстати, покопался я тут в CSS на тему решения твоей проблемы (чтобы валидно закрашивать весь бэкграунд таблицы, не только часть, перекрываемую по тэгу "a") простого решения этой задачи нет. Или на каждую "td" вешать javascript на события onmouseover и onmouseout с динамическим изменением стиля, или использовать CSS2, который... не поддерживается IE Smile (в firefox с этим всё ок)

А если

Выделить код

Код:

a.menu2
&#123;
    display&#58; block;
    width&#58; 100%;
    height&#58; 100%;
    backgorund-color&#58; #fff;
&#125;
a.menu2&#58;hover
&#123;
    background-color&#58; #f00;
&#125;

(код не пробовал, просто предположил).
Еще описать в CSS таблицу.

Balancer · №11

Блин! Ненавижу firefox за постоянные потери данных при откате. Набил ответ в форме быстрого ответа, а для отсылки по ошибке ткнулся в "Post reply" вместо "Отпправить". При нажатии на Back поле было очищено. В отличие от Оперы... Блин, гадство :-/ Ладно, вкратце, всё подробно второй раз расписывать в лом (

Валидаторы:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Документация по CSS/CSS2, только английская, русской не искал - http://www.w3.org/Style/CSS/

Последний вариант кода с display: block; может сработать. После него "width: 100%;" уже имеет смысл. Но нужно пробовать, тут теоретических знаний моих таки не хватает. Мы не верстальщики, мы только программисты

Заятсъ · №12

Русские доки по CSS -- http://pyramidin.narod.ru. Классные переводы стандартов W3C!

Digital Mirror · №13

поставь в FF плагин WebDeveloper, там есть все необходимое чтобы выявить где ошибки и кривой код
А ссылочкой не поделитесь?

http://downloads.mozdev.org/webdeveloper/webdeveloper.xpi

Полезная информация

№102-12-2004 18:49:41