Тема для Wordpress: Помогите сделать код валидным

[Mila]

Я сделала тему для Wordpress Caribbean Islands. Ее можно посмотреть на сайте http://azovstar.ru

Проверила код валидаторами http://validator.w3.org/, http://jigsaw.w3.org/css-validator/, нашлись ошибки, связанные с эффектом прозрачности.

73	   .container	   Parse Error  opacity=100, finishopacity=90, style=0,startX=10, startY=10, finishX=100, finishY=100)
194 	#s 	Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.6
195 	#s 	Parse Error opacity=60)
196 	#s 	Property -moz-opacity doesn't exist : 0.6
212 	#searchsubmit 	Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.6
213 	#searchsubmit 	Parse Error opacity=60)
214 	#searchsubmit 	Property -moz-opacity doesn't exist : 0.6
240 	#autoriz input 	Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.7
241 	#autoriz input 	Parse Error opacity=70)
242 	#autoriz input 	Property -moz-opacity doesn't exist : 0.7
257 	#autoriz #enter 	Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.8
258 	#autoriz #enter 	Parse Error opacity=80)
259 	#autoriz #enter 	Property -moz-opacity doesn't exist : 0.8

Поэтому у меня просьба ко всем желающим помочь:

Как совместить валидность кода и эффекты прозрачности?

И последнее:

Те, кого не смущает не валидный код,

могут загрузить тему Caribbean Islands на сайте http://prodengiblog.ru/archives/181

Заранее всем спасибо за помощь!

Edited January 25, 2009 by Mila

[Dimitry Wolotko]

Невалидно, в данном случае, вот это - -moz-opacity.

FF и Mozilla вполне понимают opacity.

А 73 строка тупит чем-то, чуть попозже код посмотрю, расскажу в чём дело.

[SelenIT]

В строке 73, скорее всего, какой-то хитрый фильтр для IE. Строки 195, 213, 241, 258 - опять же фильтр, видимо, alpha(opacity=...). Единственное, что я могу предложить - вынести их в отдельный CSS-файл и подключать через условные комментарии.

Но вообще "валидация CSS" - понятие условное (в отличие от валидации разметки, где код сверяется со строгой схемой). "Валидным CSS" считается код, соблюдающий правила синтаксиса и не использующий ключевых слов сверх определенного словаря (который неизбежно со временем устаревает, ведь разработка модулей CSS3 не стоит на месте). При этом в самом валидаторе порой всплывают изрядные ляпы. Так что большой практической нужды биться за зеленый заголовок в нем я не вижу (учебно-спортивный интерес - другое дело.

На мой взгляд куда серьезнее то, что в FF3.0.5 при ширине 1280 большая фоновая картинка и колонка текста разбегаются кто куда (одна - к левому краю, другая - к центру)...

[Vlad]

Кстати, использование opacity не валидно в CSS 2.1, а в CSS 3 код с этим свойством идет на ура.

[Mila]

Невалидно, в данном случае, вот это - -moz-opacity.

FF и Mozilla вполне понимают opacity.

А остальные браузеры: Опера и пр.?

На мой взгляд куда серьезнее то, что в FF3.0.5 при ширине 1280 большая фоновая картинка и колонка текста разбегаются кто куда (одна - к левому краю, другая - к центру)...

SelenIT, сложно исправить этот глюк на компе 1024х768.

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

Или может поможете?

[SelenIT]

Опера и пр.?

Опера понимает opacity с версии 9.0, т.е. вся актуальная. Сафари - аналогично. Хром по идее тоже (хотя у ранних сборок были глюки).

А чтоб фон body не съезжал - по идее достаточно добавить в CSS для body background: url("images/bg.jpg") #0673C8 50% 0 no-repeat.

[Mila]

SelenIT, спасибо. Добавила.

Посмотрите, пожалуйста, как выглядит теперь. Картинка стала на место?

[Vlad]

В FF с картинками порядок, а вот с ul ошибки вылезают. То их два подряд идет, то не хватает.

[SelenIT]

Mila, да, с картинкой теперь порядок!

А с ul-ками, да, почему-то глюки. После главного меню лишний закрывающий, а облако меток почему-то оказалось в такой загадочной конструкции:

<ul class="metki">	

<!-- Generated by Simple Tags 1.5.7 - http://wordpress.org/extend/plugins/simple-tags -->
	<div class="st-tag-cloud">

Наверное, надо было подправить шаблон для Simple Tags?

[Mila]

Спасибо за подсказку, лишний ul не заметила.

Vlad, в каком месте не хватает ul?

SelenIT, плагин Simple Tags там действительно стоит, но вы правы, проще вывести облако тегов стандартной wordpress-функцией.

Посмотрите еще пожалуйста отображение в IE7.

В нем центральная колонка поднялась выше, чем нужно. Я исправила, стала на место или нет?

Edited January 25, 2009 by Mila

[Vlad]

Вот список ошибок, "вылезли" при просмотре через расширение HTML Validator в FF.

line 91 column 140 - Ошибка: document type does not allow element "a" here; assuming missing "li" start-tag

line 116 column 14 - Ошибка: end tag for "li" omitted, but OMITTAG NO was specified

line 196 column 216 - Ошибка: end tag for "img" omitted, but OMITTAG NO was specified

line 200 column 234 - Ошибка: end tag for "img" omitted, but OMITTAG NO was specified

line 205 column 210 - Ошибка: end tag for "img" omitted, but OMITTAG NO was specified

[Mila]

При проверке валидатором ошибок вылезло еще больше:

Line 5, Column 11: there is no attribute "href" .

<BASE href="http://gameopen.ru/index.html">'>http://gameopen.ru/index.html">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Error Line 5, Column 42: element "BASE" undefined .

<BASE href="http://gameopen.ru/index.html">

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),

* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).

* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).

Error Line 50, Column 6: end tag for "BASE" omitted, but OMITTAG NO was specified .

</head>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Info Line 5, Column 0: start tag was here .

<BASE href="http://gameopen.ru/index.html">'>http://gameopen.ru/index.html">

Error Line 50, Column 6: end tag for "head" which is not finished .

</head>

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.

Error Line 96, Column 140: document type does not allow element "a" here; assuming missing "li" start-tag .

…а' rel="tag" style='font-size: 12px;'>Вопросы на засыпку</a>

Error Line 113, Column 14: end tag for "li" omitted, but OMITTAG NO was specified .

</ul>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Info Line 96, Column 10: start tag was here .

<a href='http://gameopen.ru/archives/tag/voprosy-na-zasypku' class='ta

Error Line 50, Column 7: XML Parsing Error: Opening and ending tag mismatch: BASE line 5 and head .

</head>

Error Line 288, Column 7: XML Parsing Error: Opening and ending tag mismatch: head line 3 and html .

</html>

Error Line 288, Column 7: XML Parsing Error: Premature end of data in tag html line 2 .

</html>

Я еще раз просмотрела код, вроде все правильно, но ошибки все равно вылазят.

Английского я толком не знаю, перевела текст электронным переводчиком, но получилась такая ахинея.

Помогите, пожалуйста, разобраться, что здесь неправильно - сама точно не справлюсь.

Чтобы легче было разбираться, я выделила красным цветом те места, в которых валидатор нашел ошибки.

Edited January 26, 2009 by Mila

[SelenIT]

Mila, первые пять ошибок - из-за одного тега. Для XHTML его нужно писать так: <base href="http://gameopen.ru/index.html" />. Иначе получается, что парсер, во-первых, просто не узнает этот тег (вторая ошибка), следовательно, путается в допустимых атрибутах для него (первая), а вдобавок не находит закрывающей пары к нему (третья и четвертая ошибки), и вместо нее неожиданно натыкается на закрытие </head> (пятая ошибка). Эта пятая ошибка тянет за собой и последние три - из-за лишнего открывающего тега парсер сбивается со счета, и ему кажется, что тег <head> закрывается тегом </html>, а концевой </html> - вообще лишний.

Кстати, на azovstar.ru этого некузявого <BASE> вроде не было...

Оставшиеся три ошибки (6-8) - как раз неправильная структура списка. Парсер удивляется, видя "голые" <a> внутри <ul>, не обернутые в обязательные для списка <li>. И пытается догадаться, где элемент списка должен был начаться и закончиться...

[Dimitry Wolotko]

Что я вижу сейчас:

<ul class="metki">

А самого списка нет, просто ссылки, много.

Коли ДТ XHTML, то даже одинарные теги надо закрывать, к примеру img.

[Mila]

Dimitry, спасибо за разьяснение, теперь все стало понятно.

Кстати, на azovstar.ru этого некузявого <BASE> вроде не было...

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

А теперь поставила, с надеждой, что кто-нибудь поможет с ними разобраться - или не нужно?

Насколько, вообще, желателен этот тег?

[Dimitry Wolotko]

Для блога, BASE спокойно можно выкинуть и забыть. А вот некоторые старые скрипты до сих пор с ним работают.

[Mila]

Спасибо.

[hammer1975]

Добрый! Сайт www.ukryoga.zp.ua сделал его тоже в вордпресе. Раньше сайт нормально отображался и в ИЕ и В Мозиле, месяц назад у народа в ИЕ стали вылазить глюки, а теперь вообще загружается фон и ни текста в блогах ни картинок. И в добавок банерки (счетчиков) сползли вбок а должны были быть внизу справа. В мозиле же все как отображалось так и отображается нормально. В чем дело и где копать. И еще могу сказать сразу в РНР не шарю ваще, поэтому если можно более детально описывать, что мне нужно сделать.

[Dimitry Wolotko]

@hammer1975, сздайте отдельный топик.