Проблемы кроссбраузерности

[Prokopov Nikolai]

Добрый день!

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

Сайт http://prokopov-nikolai.ru

Программирование и разработка по направлениям vba, web, flash.

Прошу оценить правильность верстки сайта и указать найденные ошибки!

Предыстория. Для веб-серфинга всегда пользуюсь любимым FF. Когда же занялся версткой своего сайта, в силу своей неопытности проверял результат работы только в нем. Об специфичности IE слышал не мало и очень удивился когда увидел "окорявленным" результат своего труда в IE. Сразу же начал переделывать верстку и под него; изучил дочерние селекторы и воспользовался ими. Через некоторое время решил посмотреть через Opery и тут оказалось все еще хуже. В третий раз принялся за верстку и вроде бы все бы ничего, но когда на работе установил на XP IE8, то после увиденного мне снова стало нехорошо.

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

За ранее благодарен всем откликнувшимся!!!

[psywalker]

А чё там у тебя браться-то, вёрстка обычная, шапка, контент, который состоит только из рисунка (лупы) и футер. Перед началом работы открой все нужные браузеры и тести в них каждый этап работы начиная сверху.

1) Откажись от таблиц в пользу слоёв.

2) Начни с шапки, засунь в неё необходимые ссылки и форму поиска, и выровни по-правому краю.

3) Далее переходи к контенту, засунь в него лупу, задай ей размеры и выровни посередине. И, кстати, подними её немного наверх отриц. марджином.

4) Отпозиционируй ссылки в нужные места и принимайся за подвал.

[Prokopov Nikolai]

1) Откажись от таблиц в пользу слоёв.

Я в принципе так и сделал. Таблица всего лишь одна - 3х3. 1 и 3 столбцы использую в качестве резинки. Ориентируюсь на ширину экрана 1280. Во 2 столбце сверху вниз идут хэдер, контернт и футер.

Все содержимое я засунул в слой (<div class="contenet">)

вот его стиль:

.content {

position:relative;

left:200px;

width:770px;

height:625px;

top:-20px;

text-align:center;

}

Как Вы можете видеть все его содержимое выровнено по-середине, но почему-то текст в тэгах H1 и H2 в различных бразерерах позиционируется по-разному! Вот к примеру, посмотрите эту страничку http://prokopov-nikolai.ru/category/flash/

[psywalker]

Я в принципе так и сделал. Таблица всего лишь одна - 3х3. 1 и 3 столбцы использую в качестве резинки. Ориентируюсь на ширину экрана 1280. Во 2 столбце сверху вниз идут хэдер, контернт и футер.

Все содержимое я засунул в слой (<div class="contenet">)

вот его стиль:

.content {

position:relative;

left:200px;

width:770px;

height:625px;

top:-20px;

text-align:center;

}

Как Вы можете видеть все его содержимое выровнено по-середине, но почему-то текст в тэгах H1 и H2 в различных бразерерах позиционируется по-разному! Вот к примеру, посмотрите эту страничку http://prokopov-nikolai.ru/category/flash/

Нихрена ты не отказался от таблиц. Отказаться от них, означает использовать их только там, где они и предназначены, а не для всего живого на сайте. Далее зачем ты главному контейнеру назначил выравнивание текста по центру? Ведь теперь все его потомки также будут выравниваться по центру (текст). Вместо этого text-align:center; нужно было написать margin: 0 auto;

[Prokopov Nikolai]

1. Я правильно понял, что у меня должно быть три основных слоя:

<div id="header">Здесь все ссылки включая меню - о себе, flash, web, office</div>

<div id="content">Содержимое страниц поднятое вверх отрицательным марджином.</div>

<div id="footer">нижняя часть</div>

2. Лупа должна быть целиком внесена в фон "contenta" или как сейчас разбита на две части (верхняя темная и нижняя светлая)?

3. Когда я буду поднимать "content" вверх марджином, то это отрицательное значение все браузеры одновременно будут понимать одинаково или для каждого нужно будет задавать свое значение? Если да то как это лучше сделать?

4. Допустим я хочу ориентироваться на ширину экрана 1280. Как правильно распределить свободное место если ширина будет больше (н-р 1366)?

[psywalker]

1. Я правильно понял, что у меня должно быть три основных слоя:

<div id="header">Здесь все ссылки включая меню - о себе, flash, web, office</div>

<div id="content">Содержимое страниц поднятое вверх отрицательным марджином.</div>

<div id="footer">нижняя часть</div>

2. Лупа должна быть целиком внесена в фон "contenta" или как сейчас разбита на две части (верхняя темная и нижняя светлая)?

3. Когда я буду поднимать "content" вверх марджином, то это отрицательное значение все браузеры одновременно будут понимать одинаково или для каждого нужно будет задавать свое значение? Если да то как это лучше сделать?

4. Допустим я хочу ориентироваться на ширину экрана 1280. Как правильно распределить свободное место если ширина будет больше (н-р 1366)?

1) Правильно

2) А это уже как тебе удобнее, я бы например сделал её одной большой картинкой, выровнял бы посередине и назнчил ей отриц. верхний марджин.

3) Поднимать контент не нужно, смотри пункт 3

4) Сделай минимальную ширину 1280пк

[Prokopov Nikolai]

Сделай минимальную ширину 1280пк

не совсем понял, что под этим подразумевается, а именно слово "минимальную"? Я предполагал, что всем 3 основным дивам задать параметры display:block; width:1260px;

У меня получается, что header и footer имеют коричневый фоновый цвет. Если делать лупу как ты рекомендуешь одной картинкой, то не будет проблем с совпадением границ? И картинку я так понимаю лучше сделать *.png с прозрачным фоном?

[psywalker]

не совсем понял, что под этим подразумевается, а именно слово "минимальную"? Я предполагал, что всем 3 основным дивам задать параметры display:block; width:1260px;

У меня получается, что header и footer имеют коричневый фоновый цвет. Если делать лупу как ты рекомендуешь одной картинкой, то не будет проблем с совпадением границ? И картинку я так понимаю лучше сделать *.png с прозрачным фоном?

1) Я имел ввиду http://htmlbook.ru/css/min-width.html

2) Картинку ПНГ однозначно

[Prokopov Nikolai]

После того как я поднял картинку, мое верхнее меню оказалось под ней. Не доступно!

Что делать? http://prokopov-nikolai.ru/new.html

Edited January 27, 2010 by Prokopov Nikolai

[psywalker]

После того как я поднял картинку, мое верхнее меню оказалось под ней. Не доступно!

Что делать? http://prokopov-nikolai.ru/new.html

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

[Prokopov Nikolai]

Ссылки стали сверху, только картинка залезла под слой "header"?!

пробовал наоборот пункты меню сделать -1, но тогда в Opera ссылки почему-то вообще пропали.

Если не сложно, то посмотрите пожалуйста еще что у меня с hover он почему-то не работает в IE и Opera, работает только FF.

[Justnewone]

Ссылки стали сверху, только картинка залезла под слой "header"?!

пробовал наоборот пункты меню сделать -1, но тогда в Opera ссылки почему-то вообще пропали.

Если не сложно, то посмотрите пожалуйста еще что у меня с hover он почему-то не работает в IE и Opera, работает только FF.

z-index-ом прибили наверна?

Он же как скотч. наклеил поверх и изолировал слой от всего, даж от мышиных событий JS.