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

Пока профессионалы спят... маненько пошалю ;)

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

1. имеют разные движки, которые 
2. написаны разработчиками, по-разному интерпретирующими стандарты (особенно преуспели в этом ребята из M$.)
3. имеют разную кривизну в собственном коде (одни загнуты вправо, другие - влево 


Как с этим бороться - вопрос отдельный. И довольно сложный.

1. На старые кривые браузеры вообще забить. Что относить к понятию "старый" - решать придётся индивидуально. Для Оперы и ФайрФокса, ИМХО, стоит ориентировать на самые последние версии и билды. Используют их, как правило, люди достаточно "технически продвинутые" и следящие за обновлениями программ (которые, к тому же, совершенно бесплатны)

2. Писать код с максимально возможным соблюдением стандартов w3c, избегая невалидных хаков. Это, по крайней мере, минимизирует проблемы при появлении новых браузеров (к M$/IE, пожалуй, это относится с большой натяжкой)

3. В реальной жизни придётся использовать хаки для разделения браузеров (для IE - ещё и условные комментарии) и отдавать каждому браузеру код, учитывающий его персональную кривизну.

Моя ИМХА так думает.

Да, ответ неутешительный... это же какой геморрой   
Особенно надоедают съезжания элементов, каждый браузер делает свои отступы, границы...

Вот - для конкретики см. здесь
Может на этом примере мне объяснить подробнее? И по возможности помочь с кодом, мне здесь как раз и нужно, чтобы на всех браузерах эта страничка смотрелась идентично.

Хм... css хаки, об этом я не слышал... можете ссылки кинете, если таковые имеются?

Это сообщение отредактировал(а) AN_Reise - 14.7.2007, 06:27

1. Чтобы обнулить все "заводские настройки" браузеров есть специальные средства.

2. Какие конкретно хаки интересуют? Хорошие подборки самых разнообразных хаков, предназначенных для разделения бразуеров, есть здесь, здесь и т.д. А вообще, можно погуглить с запросом css hacks browser и чтиво на ближайшую пару месяцев обеспечено.

3. По раскладке, которую Вы хотите сделать, очень мало информации. Нужно видеть макет и подробнейшее ТЗ:  что "резинится", что "не резинится", что и где выводится и т.д. и т.п. Лично меня ничто не выводит из равновесия так, как необходимость десять раз ездить по одному месту, переделывая вёрстку под каждый новый "бзик". Один из главных принципов сбережения собственных нервов при работе - верстать только после того, как железно согласован макет. Любые последующие изменения - за отдельные деньги. Желательно большие, чтобы желание "бзикать" исчезло сразу  ;)

Да, а в качестве основы для своей страницы посмотрите следующий пример (фоновый цвет только для того, чтобы были видны div'ы):



Это сообщение отредактировал(а) WebDisaster - 14.7.2007, 17:45

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

http://an-reise2.narod.ru

Все работает, обновил версии браузеров, работает   

Это сообщение отредактировал(а) AN_Reise - 20.7.2007, 06:28

Хочу задать конкретный вопрос, 
В общем есть блок:

http://liliana2.freetzi.com/index12.htm

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

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

или вот так, но тоже не работает:


Это сообщение отредактировал(а) liliana2 - 22.11.2007, 09:30

Я не понял, зачем Вам там

#contentsie{display: table;}

ИМХО, если убрать, всё работает нормально.

Если убрать, не сохраняется центровка при изменении разрешения экрана (в частности масштаб в опере) 

Ой   и правда работает...  
а раньше не работало... теперь только ie выбивается... но там надо комментом маргин побольше просто вставить, да?  

Это сообщение отредактировал(а) liliana2 - 22.11.2007, 11:28

Какая версия IE? Смотрел в 6-ой проблемы не видел. Семёрки сейчас под рукой нет.

так должно быть? чтобы в ие, основной блок был тоже по центру?

Повторю ещё раз: в IE6 я проблемы не вижу. Всё и так "по центру". Если вопрос касается синтаксиса условных комментариев, тогда -- нет, неправильно.

1. Стили должны (по стандарту) подгружаться между <head> и </head> (если это не инлайн-стили).
Если Вы хотите определить стиль для всех версий IE, тогда правильно так:



А уже внури файла style.css пишете .contents {margin: 0 auto 0 100px;}

Причём, если это идет "переопределение" ранее назначенного стиля, которое должно действовать только для IE (всех версий) и игнорироваться другими браузерами, тогда этот файл должен загружаться последним

Следующий вариант (тоже последний из загружаемых стилей, если идёт переопределение для всех версий IE): 



Это сообщение отредактировал(а) WebDisaster - 22.11.2007, 12:20

В том то и дело что в 6 ие все приклеено к левому краю
Хотя спасибо что подсказали где это прописывать
в ие 7 все работает нормально
я сделала так:


Это сообщение отредактировал(а) liliana2 - 22.11.2007, 12:30

Мама...  А что такое 



*** пошёл покурить ***

ой... блин.. попутала немного, мозги кипят, ну у меня почему то даже при таком правильно поставленном синтаксисе и расположении ничего не выходит все равно приклеивается к левому краю, если ставлю флоат райт, приклеивается вправо (*паника* *что же мне делать?!!!*)
Есть еще варианты, примеры, как сделать в ие меньше 7-го нормальную центровку?

Это сообщение отредактировал(а) liliana2 - 22.11.2007, 12:44