Как делаются мультибраузерные сайты?

[м.н.с.]

Привет всем!

Я новичок, делаю свою первую простую персональную страничку. Нужна помощь.  

В хроме сайт выглядит нормально, а в мозиле и IE все сдвинуто в право и увеличен масштаб. Картинка становится дефектной. Уменьшил масштаб страницы в браузере со 100% на 80 % и вид сайта нормализовался.

Сделал проверку кодов Dreamweaver-ом, он что то исправил, нашел ошибку  "удвоение поля потока" у непринципиальной линии, короче не помог исправиить дело.

Сайт еще не загружен в интернет, открываю его через нотпад.

Вот эта страничка  html форума с моим вопросом в хроме выглядит нормально, а в мозиле ее масштаб увеличен, но это не портит общую картину. Все блоки находятся на своих местах.

А в моем случае увеличение масштаба привело к сильному сдвиганию центральных блоков в право. Не красивая картинка.

Но у других верстальщиков картинка сайта не портится в разных браузерах, потому что они что то для этого делают дополнительно (мультибраузерная верстка). Что и как?

 

В чем может быть дело?

1. в фиксированной ширине и выравнивании по центру на сайте и увеличении масштаба в браузере?

2. говорят, что добротная вёрстка получается при использовании float:left и float:right, а я применял в css position:absolute; top:...px; left:...px;

3.....

 

Я попробую проверить эти два совета в меру своего понимания их сути, а вопрос такой - 

есть ли шаблоны мультибраузерных сайтов с объяснениями, что бы посмотреть их коды и использовать.

Я смотрел код этой страницы (htmlforum), но ничего не понял.

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

 

[ShumNo]

Скорее всего в вашем случае проблема с абсолютным позиционирование элементов. Наверное вы используете их там где не надо.

[rus]

1) научитесь пользоваться firebug (или любым другим инспектором кода).

2) локализуйте проблему в пределах нескольких строк кода

3) выкладывайте код на: http://jsfiddle.net/

[м.н.с.]

Спасибо за отклики. Заменил в css position:absolute; top:...px; left:...px; на margin и картинка в мозиле выравнялась. Хоть масштаб картинки и увеличен по сравнению с таковым в хроме, но общий вид в мозиле теперь приемлем.

Теперь в хроме проблемы. При масштабе страницы 100% в header блоки с заголовком и меню заметно сдвинуты в лево. Если увеличиваю масштаб страницы до 110% все нормализуется, вид примерно такой же как в мозиле.

Как же всетаки добиться мультибраузерности сайта?

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

[м.н.с.]

Ну инструкцию нашел - Вставлять нужно и css и html и js - если есть и только потом нажимать на "run"... В 4-ом блоке увидите результат.

Вставил. В 4-ом блоке мой сайт, где нет картинок в header и нет картинок кнопок меню, только их названия.

В блоке  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, это не уже на выходе."

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

[Q4Dizzy]

То есть на фиддле требуется вводить весь код начиная с body.

 

doctype и head (и всё что в нём) там не требуется.

Edited October 8, 2014 by Q4Dizzy

[м.н.с.]

Ввел весь код начиная с body - "run" =  В 4-ом блоке мой сайт, где нет картинок в header и нет картинок кнопок меню, только их названия. Никаких сообщений. Либо ошибок нет, либо все там ушли на обед. Что то это смахивает на "а король то голый"...

[Q4Dizzy]

Картинок нет,потому что скорее всего в css написан относительный путь к ним. так как проект на фиддле, картинки обычно заливаются в инет на радикал или другой пообный сервис. И после этого  в фиддле уже в колонке css пишется абсолютный путь к ним.

 

Как подправите - напишите здесь ссылку на ваш проект в фиддл (в фиддле кнопочка save), и после перезагрузки там появится ссылка. вот её сюда в напишите.

Если не разберётесь - пишите мне в скайп, попробую помочь.

[м.н.с.]

Ок. save работает после регистрации. Как зарегистрироваться на этом сайте не понятно.

Спасибо видеокурсам Е.Попова по html - пальцем паказал на сайты валидаторы: https://ru.wikipedia.org/wiki/%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%82%D0%BE%D1%80_%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B0

Тут:

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

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

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

 

ЭТО понять не возможно.

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

Сухой осадок - путь добиться мультибраузерности сайта валидацией кодов - тупиковый.

 

Так как же делаются мультибраузерные сайты?

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

Edited October 8, 2014 by м.н.с.

[ShumNo]

Телепаты увы все в отпуске. Если хотите конструктива то выкладывайте в песочницу разметку со стилями

[Q4Dizzy]

Что-то я не наблюдаю у вас открывающего тега 

<html>

На эту первую ошибку и ругается валидатор. + у вас кажется доктайп строгий.

 

Читаем о доктайпе

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

Это вторая ваша ошибка. 

 

И пишите все теги в нижнем регистре.

Edited October 8, 2014 by Q4Dizzy

[м.н.с.]

Большое спасибо всем за неравнодушие! В основном все получилось. Помогла подсказка -

 

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

 

Прошу помощи еще в двух мелочах:

1.     Сайтом jsfiddle.net пользоваться придется. Прошу помочь разобраться и в этом, а то я дальше этого не двигаюсь -

Как правильно работать здесь?

 

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

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

[Q4Dizzy]

Сохраните ваш код на фидле. и напишите сюда ссылку.. сохранение можно сделать и без регистрации..

Картинок нет,потому что скорее всего в css написан относительный путь к ним. так как проект на фиддле, картинки обычно заливаются в инет на радикал или другой пообный сервис. И после этого  в фиддле уже в колонке css пишется абсолютный путь к ним.   Как подправите - напишите здесь ссылку на ваш проект в фиддл (в фиддле кнопочка save), и после перезагрузки там появится ссылка. вот её сюда в напишите.