Ужасные артефакты на сайте, под разными версиями популярных браузеров

@Код - Альфа · Регистрация: 27.04.2013

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

Создал недавно два небольших сайта. Проверял на трех браузерах (Opera, Google chrome,
Firefox). На первых двух, все выглядело нормально. на последнем, текст страницы почему то
ушел вправо. Потом проверил на IE 7. Некоторые картинки находились не на своих местах.
browsershots - вообще показал что, на многих версиях популярных браузеров, мои сайты работают
криво.

Первый сайт.

Ссылка, по которой вы можете посмотреть сайт - http://mariagestudio.ru/
На некоторых версиях браузеров, картинки оказываются не на своем месте. Куда то пропадает
часть текста. Особенно ужасно все это выглядит на Firefox. При создании использовал - jquery,
html 5, скрипты и прочее (в чем я плохо разбираюсь).

пример, основного артефакта на Firefox:

Ужасные артефакты на сайте, под разными версиями популярных браузеров

Второй сайт.

Ссылка - http://korrado.org/

Это вообще непонятно что. У меня анимация воспроизводится нормально. Но у других, на странице вообще отсутствует слайдер. Вроде, простая страница, не нагруженная. Но воспроизводиться у многих не может. И причем у одного моего знакомого, стоят те же версии Opera и Google chrome. Но у него слайдер не появляется. На сайте присутствует только картинка фона.

Хотелось бы узнать, в чем может быть дело. Может у меня ошибки в CSS, или JS? Или у большинства людей стоят старые браузеры, которые не могут нормально воспроизвести jquery, и HTML 5?

Буду очень благодарен за ответы.

@Код - Альфа · 27.04.2013, 11:49 **[ТС]**

Вот еще скриншоты, некоторых проблем:

Комментарий модератора

Прикрепляйте файлы и изображения к сообщениям. Кнопка со скрепкой в расширенном режиме.

@dolte · 27.04.2013, 12:45

используйте таргетированные стили.

например

CSS
1
2
3
@-moz-document url-prefix() { .selector { color: red; } } 
 
@media screen and (-webkit-min-device-pixel-ratio:0) { #right_col{height: 2419px;} }

@Код - Альфа · 27.04.2013, 15:29 **[ТС]**

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

используйте таргетированные стили.

например

CSS
1
2
3
@-moz-document url-prefix() { .selector { color: red; } } 
 
@media screen and (-webkit-min-device-pixel-ratio:0) { #right_col{height: 2419px;} }

Можно поподробнее, как это?

@dolte · 27.04.2013, 16:01

Например у вас есть

CSS
1
2
3
4
5
6
.logo{
position: absolute;
left: 150px;
top: 100px;
background: url('images/logo.png');
}

в опере будет всё на своих местах, а в мозиле например уедет в верх/низ/лево/право

так вот при помощи

CSS
1
@-moz-document url-prefix() {{ }}

можно поставить всё на свои места, координаты могут быть совсем другие, в этом ничего страшного

CSS
1
2
3
4
5
6
7
8
@-moz-document url-prefix() { 
.selector{ 
position: absolute;
left: -10000px;
top: 8000px;
background: url('images/logo.png');
} 
}

@Код - Альфа · 27.04.2013, 21:03 **[ТС]**

Ничего не получается.

@Код - Альфа · 27.04.2013, 21:13 **[ТС]**

Посмотрите какое у меня безобразие в dreamweaver, творится.

@dolte · 27.04.2013, 21:27

.selector соответственно нужно заменить на ваш класс.

в дримвивере постоянно бардак, удалите его и верстайте через любой текстовый редактор

=)

Выложите код сайта, в архиве мжно, сегодня посмотрю.

@Код - Альфа · 27.04.2013, 21:32 **[ТС]**

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

.selector соответственно нужно заменить на ваш класс.

в дримвивере постоянно бардак, удалите его и верстайте через любой текстовый редактор

=)

Выложите код сайта, в архиве мжно, сегодня посмотрю.

Я понял что это проблема в свойствах css, но никак не в странице сайта (так как почти на всех страницах текст съезжает вправо).

@Код - Альфа · 27.04.2013, 21:39 **[ТС]**

Вылаживаю css, и одну из страниц сайта. Может поймете ошибку.

@Код - Альфа · 29.04.2013, 08:47 **[ТС]**

Что то никто не отвечает. Неужели эта проблема, для меня так и останется неразрешимой.

Вот вылаживаю небольшую часть CSS. Мне кажется, проблема где-то здесь.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a {color:#5f870e;text-decoration:none;outline:none}
a:hover {color:#fff}
h1 {padding:12px 0 0 10px;float:left}
h1b {padding:12px 0 0 315px;float:left}
h2 {font-size:33px;color:#fff;font-weight:700;line-height:1.2em;padding:30px 0 11px 0;letter-spacing:-1px}
h3 {font-size:27px;color:#fff;font-weight:700;line-height:1.2em;padding:33px 0 17px 0;letter-spacing:-1px}
h3.color1 {padding:0 0 7px 0}
p {padding-bottom:24px}
p1 {padding-bottom:24px}
.marg_vidpl {margin-right:85px; float:right}
.marg_right1pr {font-family: 'Cuprum', sans-serif;margin-right:45px}
.marg_right1b {background:url(../images/slider/test_aa.png);height:265px;width:600px;}
.marg_right2 {margin-right:20px}
.marg_right2b {background:url(../images/slider/test_aa1.png);height:265px;width:600px;}
.marg_right3b {background:url(../images/slider/test_aa2.png);height:265px;width:600px;}

@НС · 09.05.2013, 20:14

тут вообще кто ни будь с ресетом дружит?!

Кликните здесь для просмотра всего текста

в самый верх кода вставь

CSS
1
html, body {margin:0;padding:0;height:100%;}

Код - Альфа, желательно исключить из CSS кода отрицательные значения margin(ов)
пример -

Кликните здесь для просмотра всего текста

8я строчка снизу

CSS
1
#ContactForm {margin-top:-2px}

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Код - Альфа 11 / 11 / 6 Регистрация: 27.04.2013 Сообщений: 138

	Ужасные артефакты на сайте, под разными версиями популярных браузеров 27.04.2013, 11:27. Показов 5667. Ответов 11 Метки нет (Все метки) Создал недавно два небольших сайта. Проверял на трех браузерах (Opera, Google chrome, Firefox). На первых двух, все выглядело нормально. на последнем, текст страницы почему то ушел вправо. Потом проверил на IE 7. Некоторые картинки находились не на своих местах. browsershots - вообще показал что, на многих версиях популярных браузеров, мои сайты работают криво. Первый сайт. Ссылка, по которой вы можете посмотреть сайт - http://mariagestudio.ru/ На некоторых версиях браузеров, картинки оказываются не на своем месте. Куда то пропадает часть текста. Особенно ужасно все это выглядит на Firefox. При создании использовал - jquery, html 5, скрипты и прочее (в чем я плохо разбираюсь). пример, основного артефакта на Firefox: Второй сайт. Ссылка - http://korrado.org/ Это вообще непонятно что. У меня анимация воспроизводится нормально. Но у других, на странице вообще отсутствует слайдер. Вроде, простая страница, не нагруженная. Но воспроизводиться у многих не может. И причем у одного моего знакомого, стоят те же версии Opera и Google chrome. Но у него слайдер не появляется. На сайте присутствует только картинка фона. Хотелось бы узнать, в чем может быть дело. Может у меня ошибки в CSS, или JS? Или у большинства людей стоят старые браузеры, которые не могут нормально воспроизвести jquery, и HTML 5? Буду очень благодарен за ответы. 0

@Код - Альфа 11 / 11 / 6 Регистрация: 27.04.2013 Сообщений: 138
	27.04.2013, 21:03 [ТС]
	Ничего не получается. 0

@Код - Альфа 11 / 11 / 6 Регистрация: 27.04.2013 Сообщений: 138
	27.04.2013, 21:13 [ТС]
	Посмотрите какое у меня безобразие в dreamweaver, творится. Миниатюры 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,224
	27.04.2013, 21:27
	.selector соответственно нужно заменить на ваш класс. в дримвивере постоянно бардак, удалите его и верстайте через любой текстовый редактор =) Выложите код сайта, в архиве мжно, сегодня посмотрю. 0