Адаптация сайта под различные браузеры

15.02.2012, 14:53. **Показов** 3665. **Ответов** 4

Author24 — интернет-сервис помощи студентам

Добрый день!

Возникла проблема адаптации сайта под браузеры. Подскажите, плиз, как с этим бороться:

1) IE-все работает нормально

2)Netscape
Загружает только фоновую картинку и заголовок, прописанный в <title>.Больше ничего отображать не хочет

3)Mozilla

3.1 Код следующий

<style>
.myname{background:993333;color:yellow;}
.myname1{background:yellow;color:993333;}
</style>

<a href='index.html' class='myname' onMouseOut="this.className = 'myname'" onMouseOver="this.className = 'myname1'

При наведении, как и должно быть, фон ссылки становится желтым, а цвет шрифта красным. А вот в статичном состоянии цвет шрифта ссылки желтый, а вот почему-то цвет вообще фона вообще не отображается.

3.2 Подскажите, плиз, как в Mozill’e Java-скриптом сделать так, чтобы при наведении на элемент маркер принимал в форме руки?

4)Opera

Проблема, сходная с Mozillo’й : курсор принимает форму руки только при повторном наведении на ссылку.

Заранее спасибо

15.02.2012, 15:05

3.3 Еще одна проблема: Mozilla не видит параметра width,заданного в CSS-классе,и устанавливает ширину элемента по умолчанию.

@bazile · 15.02.2012, 16:47

Сообщение от mikelangelo

2)Netscape
Загружает только фоновую картинку и заголовок, прописанный в <title>.Больше ничего отображать не хочет

Какая версия Netscape? Надеюсь не 4-ая

Код приведи.

Сообщение от mikelangelo

3.1 Код следующий

<style>
.myname{background:993333;color:yellow;}
.myname1{background:yellow;color:993333;}
</style>

<a href='index.html' class='myname' onMouseOut="this.className = 'myname'" onMouseOver="this.className = 'myname1'

При наведении, как и должно быть, фон ссылки становится желтым, а цвет шрифта красным. А вот в статичном состоянии цвет шрифта ссылки желтый, а вот почему-то цвет вообще фона вообще не отображается.

Во-первых у тебя стили с ошибкой записаны. Перед числовыми значениями цвета надо ставить #
То есть
.myname {background:#993333; color:yellow}
.myname1{background:yellow; color:#993333}
Более того цвета которые содержат пары повторяющихся значений можно сокращенно записывать
.myname {background:#933; color:yellow}
.myname1{background:yellow; color:#933}

Во-вторых, для смены стиля ссылки в CSS есть специальные возможности
a:link { ... } /* Ссылка */
a:visited { ... } /* Посещенная ссылка */
a:hover { ... } /* Ссылка на которую наведен курсор мыши */
a:active { ... } /* Активная ссылка */

Сообщение от mikelangelo

3.2 Подскажите, плиз, как в Mozill’e Java-скриптом сделать так, чтобы при наведении на элемент маркер принимал в форме руки?

Не понял вопроса. Какой маркер?
Для смены вида курсора мыши в CSS есть свойство cursor

Сообщение от mikelangelo

3.3 Еще одна проблема: Mozilla не видит параметра width,заданного в CSS-классе,и устанавливает ширину элемента по умолчанию.

Пример приведи.

15.02.2012, 20:39

Действительно,Мозилла подходит более сурово к коду.Если IE И Opera проглатывают отсутствие # в коде цвета,то в Мозилле это не катит.Спасибо за разъяснение.

Что касется проблем с шириной элемента,которая прописана в классе,но почему-то не отображается в Мозилле,то код ниже.
В нем же проблема с формой курсора.Кстати,если заменить форму курсора с Hand к примеру, на s-resize,то курсор примет требуемую форму,а если поставить hand,то он выглядит так,как будто навели мышку на текстовое поле.

[quote]<style>
.niz1{background:#993333;color:yellow;width:250;bordercolor:red;}
.niz3{background:yellow;color:#993333;width:238;border:1;bordercolor:red;text-decoration: none;border-style:dotted;border:1;font-weight:bold;border-style:outset;font-size:14;}
.niz4{background:#CC6666;color:black;width:238;border:1;bordercolor:red;text-decoration: none;border-style:outset;font-weight:bold;font-size:14;cursor:hand;}
.katalog{background:yellow;color:#993333;width:238;border:1;bordercolor:red;text-decoration: none;font-weight:bold;font-size:14;cursor:hand;}

</style>

<script language=JavaScript>

function toggle(e, to) {

if (to.style.display == "none") {
to.style.display = "";
e.style.cursor = "hand";

} else {
to.style.display = "none";
e.style.cursor = "hand";

}
}
</script>

<DIV style="CURSOR: hand;font-size:19;"
onclick="toggle(this, menu5)" class='niz1' onMouseOut="this.className = 'niz1'" onMouseOver="this.className = 'katalog'" title='Смотреть модельный ряд для марки KAWASAKI'><b> KAWASAKI</b></DIV>

<DIV id=menu5 style="DISPLAY: none" >
<A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Чопперы

<A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Супер-спорт

<A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Неоклассики

<A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Стрит-файтеры

<A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Спорт-туризм

<A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Эндуро

</DIV>

@bazile · 16.02.2012, 11:12

Все цифровые CSS значения должны иметь явно указанную единицу измерений.
Например, width:250px (то есть пикселов). Или font-size:19pt. Единицу измерений можно опускать только для нулевых значений.

Советую тебе внимально ознакомиться с рекомендацией W3C по CSS
http://www.w3.org/TR/CSS21/

Кроме того очень полезно проверять свои CSS правила с помощью CSS validator
http://jigsaw.w3.org/css-validator/

Новые блоги и статьи
Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .	Полезные поделки на Arduino, которые можно сделать самому raxper 06.01.2025 Arduino как платформа для творчества Arduino представляет собой удивительную платформу для технического творчества, которая открывает безграничные возможности для создания уникальных проектов. Эта. . .	Подборка решений задач на Python IT_Exp 06.01.2025 Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .
С чего начать программировать микроконтроллеры raxper 06.01.2025 Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .	Из чего собрать игровой компьютер inter-admin 06.01.2025 Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .	Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного сумматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом зад Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .

Mikelangelo
		1
	Адаптация сайта под различные браузеры 15.02.2012, 14:53. Показов 3665. Ответов 4 Метки нет (Все метки) Добрый день! Возникла проблема адаптации сайта под браузеры. Подскажите, плиз, как с этим бороться: 1) IE-все работает нормально 2)Netscape Загружает только фоновую картинку и заголовок, прописанный в <title>.Больше ничего отображать не хочет 3)Mozilla 3.1 Код следующий <style> .myname{background:993333;color:yellow;} .myname1{background:yellow;color:993333;} </style> <a href='index.html' class='myname' onMouseOut="this.className = 'myname'" onMouseOver="this.className = 'myname1' При наведении, как и должно быть, фон ссылки становится желтым, а цвет шрифта красным. А вот в статичном состоянии цвет шрифта ссылки желтый, а вот почему-то цвет вообще фона вообще не отображается. 3.2 Подскажите, плиз, как в Mozill’e Java-скриптом сделать так, чтобы при наведении на элемент маркер принимал в форме руки? 4)Opera Проблема, сходная с Mozillo’й : курсор принимает форму руки только при повторном наведении на ссылку. Заранее спасибо

Mikelangelo
	15.02.2012, 15:05	2
	3.3 Еще одна проблема: Mozilla не видит параметра width,заданного в CSS-классе,и устанавливает ширину элемента по умолчанию.

@bazile 85 / 61 / 69 Регистрация: 15.03.2007 Сообщений: 6,906
	15.02.2012, 16:47	3
	Сообщение от mikelangelo 2)Netscape Загружает только фоновую картинку и заголовок, прописанный в <title>.Больше ничего отображать не хочет Какая версия Netscape? Надеюсь не 4-ая Код приведи. Сообщение от mikelangelo 3.1 Код следующий <style> .myname{background:993333;color:yellow;} .myname1{background:yellow;color:993333;} </style> <a href='index.html' class='myname' onMouseOut="this.className = 'myname'" onMouseOver="this.className = 'myname1' При наведении, как и должно быть, фон ссылки становится желтым, а цвет шрифта красным. А вот в статичном состоянии цвет шрифта ссылки желтый, а вот почему-то цвет вообще фона вообще не отображается. Во-первых у тебя стили с ошибкой записаны. Перед числовыми значениями цвета надо ставить # То есть .myname {background:#993333; color:yellow} .myname1{background:yellow; color:#993333} Более того цвета которые содержат пары повторяющихся значений можно сокращенно записывать .myname {background:#933; color:yellow} .myname1{background:yellow; color:#933} Во-вторых, для смены стиля ссылки в CSS есть специальные возможности a:link { ... } /* Ссылка / a:visited { ... } / Посещенная ссылка / a:hover { ... } / Ссылка на которую наведен курсор мыши / a:active { ... } / Активная ссылка / Сообщение от mikelangelo* 3.2 Подскажите, плиз, как в Mozill’e Java-скриптом сделать так, чтобы при наведении на элемент маркер принимал в форме руки? Не понял вопроса. Какой маркер? Для смены вида курсора мыши в CSS есть свойство cursor Сообщение от mikelangelo 3.3 Еще одна проблема: Mozilla не видит параметра width,заданного в CSS-классе,и устанавливает ширину элемента по умолчанию. Пример приведи. 0

Mikelangelo
	15.02.2012, 20:39	4
	Действительно,Мозилла подходит более сурово к коду.Если IE И Opera проглатывают отсутствие # в коде цвета,то в Мозилле это не катит.Спасибо за разъяснение. Что касется проблем с шириной элемента,которая прописана в классе,но почему-то не отображается в Мозилле,то код ниже. В нем же проблема с формой курсора.Кстати,если заменить форму курсора с Hand к примеру, на s-resize,то курсор примет требуемую форму,а если поставить hand,то он выглядит так,как будто навели мышку на текстовое поле. [quote]<style> .niz1{background:#993333;color:yellow;width:250;bordercolor:red;} .niz3{background:yellow;color:#993333;width:238;border:1;bordercolor:red;text-decoration: none;border-style:dotted;border:1;font-weight:bold;border-style:outset;font-size:14;} .niz4{background:#CC6666;color:black;width:238;border:1;bordercolor:red;text-decoration: none;border-style:outset;font-weight:bold;font-size:14;cursor:hand;} .katalog{background:yellow;color:#993333;width:238;border:1;bordercolor:red;text-decoration: none;font-weight:bold;font-size:14;cursor:hand;} </style> <script language=JavaScript> function toggle(e, to) { if (to.style.display == "none") { to.style.display = ""; e.style.cursor = "hand"; } else { to.style.display = "none"; e.style.cursor = "hand"; } } </script> <DIV style="CURSOR: hand;font-size:19;" onclick="toggle(this, menu5)" class='niz1' onMouseOut="this.className = 'niz1'" onMouseOver="this.className = 'katalog'" title='Смотреть модельный ряд для марки KAWASAKI'><b> KAWASAKI</b></DIV> <DIV id=menu5 style="DISPLAY: none" > <A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Чопперы <A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Супер-спорт <A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Неоклассики <A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Стрит-файтеры <A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Спорт-туризм <A class='niz4' href="http://mysitez.km.ua/Sites/preview/SmileDes1/arts/scripts/" onMouseOut="this.className = 'niz4'" onMouseOver="this.className = 'niz3' Эндуро </DIV>

@bazile 85 / 61 / 69 Регистрация: 15.03.2007 Сообщений: 6,906
	16.02.2012, 11:12	5
	Все цифровые CSS значения должны иметь явно указанную единицу измерений. Например, width:250px (то есть пикселов). Или font-size:19pt. Единицу измерений можно опускать только для нулевых значений. Советую тебе внимально ознакомиться с рекомендацией W3C по CSS http://www.w3.org/TR/CSS21/ Кроме того очень полезно проверять свои CSS правила с помощью CSS validator http://jigsaw.w3.org/css-validator/ 0

Опции темы