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

15.02.2012, 14:53. **Показов** 3662. **Ответов** 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/

Блоги программистов
Обновление сайта 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 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .	Руководство по созданию бота для Телеграм на Python IT_Exp 04.01.2025 Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .	Применение компонентов PrimeVue в Vue.js 3 на TypeScript BasicMan 04.01.2025 Введение в PrimeVue и настройка окружения PrimeVue представляет собой мощную библиотеку компонентов пользовательского интерфейса для Vue. js 3, которая предоставляет разработчикам богатый набор. . .
Как стать Senior developer cpp_developer 04.01.2025 В современной индустрии разработки программного обеспечения позиция Senior Developer представляет собой не просто следующую ступень карьерной лестницы, а качественно новый уровень профессионального. . .	Что известно о дате выхода Windows 12 и чего от нее ждать IT_Exp 04.01.2025 В мире технологий постоянно происходят изменения, и операционные системы не являются исключением. Windows 11, выпущенная в октябре 2021 года, принесла множество инноваций и улучшений, но. . .	Что новенького в .NET Core 9 Programming 04.01.2025 Обзор ключевых изменений в . NET Core 9 Платформа . NET Core продолжает активно развиваться, и версия 9 представляет собой значительный шаг вперед в эволюции этой технологии. Новый релиз. . .	Инструкция по установке python3.13.1 в Debian 12 AlexSky-coder 03.01.2025 sudo apt update sudo apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev wget. . .	Затестил триггеры. архив проекта прилагаю с GOA файлами в настройках архиватора проектов. Hrethgir 03.01.2025 В этот раз нет закольцованности, потому что от неё только глюки, как я понял, логика не вырезанная. Триггеры очень быстрые если верить измерениям с помощью анализатора от Gowin. Есть ещё регистры,. . .	Python в помощь DevOps IT_Exp 03.01.2025 Причины использования Python в работе DevOps Python стал неотъемлемой частью мира DevOps, и это не случайно. Этот язык программирования обладает множеством преимуществ, которые делают его. . .

Mikelangelo
		1
	Адаптация сайта под различные браузеры 15.02.2012, 14:53. Показов 3662. Ответов 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