В хроме нормально, а в мозиле и IE все сдвинуто в право и увеличен масштаб

У меня тоже такое вот.
В хроме нормально, а в мозиле и IE все сдвинуто в право и увеличен масштаб.
Уменьшил масштаб страницы со 100% на 80 % и вид сайта нормализовался.
Итак два пути.
1. Давать рекомендации посетителю изменить масштаб страницы, показать где и как...
2. В css (или html) использовать команду для мозилы и IE на изменение масштаба страницы при ее открытии в этих браузерах
Второй вариант нравится больше. Подскажите, пожалуйста, как это сделать?

0

Первый вариант и он же единственный верстать сайт под масштаб страниц в браузере на 100%... Если Вы заказчик, то первым делом проверять вёрстку на кроссбраузерность и зум страницы... Если Вам некогда перевёрстывать сайт, то как-то в нэте видел js запрещающий масштабирование страницы - можете поискать, но данное решение однозначно осложнит просмотр сайта Вашим посетителям - особенно слабовидящим... Так что возвращаемся к первому варианту...

0

Может быть тогда с такого бока зайти. Вот эта страничка форума с моим вопросом в хроме выглядит нормально, а в мозиле масштаб увеличен, но это не портит общую картину. Все блоки находятся на своих местах.
А в моем случае увеличение масштаба привело к сильному сдвиганию центральных блоков в право. Не красивая картинка.
Но у других верстальщиков картинка сайта не портится в разных браузерах, потому что они что то для этого делают дополнительно. Что и как?

Добавлено через 15 минут
Или все дело в том, что сайт еще не загружен в интернет и открывается через notepad?

0

От того в чём Вы просматриваете сайт не зависит качество вёрстки... Возможно у Вас некорректно работает браузер, а может основные блоки Вашей страницы не отцентрированы... Причин может быть много...

0

1. некорректно работает браузер. Другие сайты и сайт киберфорум открываются нормальньо....
2. основные блоки страницы не отцентрированы... Тогда и в хроме были бы проблемы...

Добавлено через 10 минут
Нет, все дело именно в фиксированном размере и увеличении маштаба.
Ну есть же приемы все это нейтрализовывать.

0

1. Значит дело всё-таки в вёрстке..
2. Далеко не факт... Возникает вопрос почему тогда блоки съезжают, если всё хорошо?
3. Резиновая вёрстка хороший нейтрализатор px задаются в процентах... У меня например тоже есть пару сайтов с фиксированной вёрсткой и ничего никуда не уезжает... А хотя ещё такой проблемой может быть абсолютное позиционирование - как я про него забыл...

0

Тааак... теплее...
Да я применял в css position:absolute; top:...px; left:...px;
Попробовать изменить на маргины - падинги?

0

В идеале в шаблоне лучше всего использовать float и как Вы говорите margin и padding паровозом... При масштабировании страницы объекты с абсолютным позиционированием вываливаются из потока - это наглядно видно например в ie(особенно в 8 версии) и на мобильных устройствах при масштабировании... Поэтому старайтесь его использовать только в крайних случаях... Добротная вёрстка получается при использовании float:left и float:right - не разваливается хотя бы до 50% при уменьшении...

0

Спасибо, пробую.

0

Заменил в css position:absolute; top:...px; left:...px; на margin ... и картинка в мозиле выравнялась. Хоть масштаб картинки и увеличен по сравнению с таковым в хроме, но общий вид в мозиле теперь приемлем.
Теперь в хроме проблемы. При масштабе страницы 100% в header блоки с заголовком и меню заметно сдвинуты в лево. Если увеличиваю масштаб страницы до 110% все нормализуется, вид примерно такой же как в мозиле.

Итак, путь добиться мультибраузерности сайта понятен - проверять коды. Есть даже онлайн-проверка, например,
на: http://jsfiddle.net/

А как выложить код на sfiddle ? На ютубе есть видео, но все на английском. Есть ли инструкции по работе на этом сайте на русском?

0

А что там непонятного в блоки для html, js и css вставляете свой код... Вверху в меню нажимаете кнопку "run" смотрите что получилось...

0

Вставлять нужно по одному коду? А то я скопировал и вставил все коды css из нотпада - кнопку "run" - и никаких результатов.
Есть ли онлайн проверки кода, куда можно было бы вставлять сразу все коды?

0

Вставлять нужно и css и html и js - если есть и только потом нажимать на "run"... В 4-ом блоке увидите результат... Если вставите просто css естественно ничего не произойдёт...

0

Вставил css и html - кнопку "run" . В окне html на желтом фоне сообщения -

No need for the META tags.
No need for the HEAD tag, it's already in the output.
For JavaScript use the panel below or the Resources panel for external files.
For external CSS files use the Resources panel on the left.
Перевод -
"Нет необходимости в тегах META.
Нет необходимости в теге HEAD, это не уже на выходе."

Что практически нужно делать по таким результатам?

Добавлено через 2 часа 33 минуты
Спасибо видеокурсам Е.Попова по html - пальцем паказал на сайты валидаторы: https://ru.wikipedia...лидатор_формата
Тут:
Сервис валидации HTML консорциума W3C

Сервис валидации CSS консорциума W3C

Результаты проверки моих 6 css файлов - ошибок нет.
Результаты проверки html файла - 12 ошибок с описанием, указанием номера строки.



ЭТО понять не возможно.
И главное, Попов говорит, что даже если все коды соответствуют требованиям, это не является 100% гарантией того, что сайт будет выглядеть на разных сайтах одинаково.
Сухой осадок - путь добиться мультибраузерности сайта - тупиковый.

Так как же делаются мультибраузерные сайты?
У меня сайт в хроме и в мозиле выглядят по разному (дальше не цензурно...).

Добавлено через 6 минут
Пардон, хотел написать -
путь добиться мультибраузерности сайта валидацией кодов - тупиковый

0

Ну во-первых, не мультибраузерности, а кроссбраузерности... Во-вторых валидаторы проверяют Ваш код на соответствие стандартам установленным W3C консорциумом(другими словами проверка чистописания, а не проверка кроссбраузерности)... В третьих сайты валидаторы и сайты для теста кода - это две разнополярные вещи... На jsfield.net проверяется, как будут выглядеть элементы в браузере при использовании того или иного кода, а валидаторы проверяют правильность написанного кода... Одни тестируют - другие проверяют... Для того, чтобы написать кроссбраузерный сайт необходимо придерживаться только одной вещи - верстать его теми тегами, которые будут одинаково отображаться во всех браузерах(в каких браузерах поддерживается тот или иной тег, а также его описание можно посмотреть в htmlbook)... Плюс ко всему всегда для блоков указывать высоту, ширину и выравнивание, стараться не использовать позиционирование(особенно абсолютное-это зло)... Если хотите использовать специфические теги допустим border-radius - тогда необходимо прописывать костыли для браузеров(за частую это префиксы, иногда надо подключать дополнительные библиотеки)... Что касается jsfield - то он Вам написал, что для проверки кода не нужно указывать теги <html>, <head>, <body> - они уже вшиты... то есть вставляете только блоки, которые хотите проверить... Думаю теперь доступно объяснил...

1

Сообщение от Hyzek И главное, Попов говорит,

никогда не слушайте то что говорит этот человек! Если вы конечно хотите стать хорошим разработчиком. И вообще, я советую ознакомится вам со следующим изданием "Большая книга CSS3" - Дэвид Макфарланд. Она поможет вам и ответит на огромное количество ваших вопросов. Ну и конечно же, побольше практики

1

Аве Fedor92!
Отказ от позиционирования абсолютного дал нужный результат. Сайт в разных браузерах выглядит примерно одинаково.
Сайтом jsfiddle.net пользоваться придется. Прошу помочь разобраться и в этом, а то я дальше этого не двигаюсь -


И еще ньюанс. Сейчас в хроме из динамической кнопки меню выпала вниз черта.

В мозиле все нормально. Что тут надо предпринимать?

0

По поводу кнопки надо смотреть код или хотя бы рисунок... Я одного не могу понять, а почему Вы сразу не тестите свои разработки на виртуальном сервере... Или на ПК, например(без виртуалки)... Тестирование кода в интернете тоже вещь довольно специфическая, а так написали код и сразу посмотрели, что получилось... Для тестирования каких-то элементов лучше всего применять блочный подход... То есть взяли блок вытащили его в отдельный проект и посмотрели, что как - может что-то подправили... И так со всеми блоками, когда будут готовы все соберите их воедино...

0