Не могу достичь кроссбраузерности

7ion · July 1, 2011

Здравствуйте!

Я начинающий веб-дизайнер, и, собственно, чтобы поднатореть начал с редизайнов.

Оригинал сайта: http://pskov.izbirkom.ru

То, что я сделал: http://sie-club.ru/design/

Но так как задумано сайт выглядит только в Опере.

10034_Сниморпорок.PNG

Остальные браузеры выдают мне черте что.

Пожалуйста, помогите, я уже не знаю что делать.

Вот например margin-top: -17px; для таблицы работает только в Опере.

В остальных браузерах таблица не двигается.

Vlad · July 1, 2011

Начните с доктайпа и строгого режима. Не знаете что это, тогда прочитайте этот материал.

http://htmlbook.ru/samlayout/rezhimy-brauzerov/

7ion · July 1, 2011

Начните с доктайпа и строгого режима. Не знаете что это, тогда прочитайте этот материал.
http://htmlbook.ru/samlayout/rezhimy-brauzerov/

Спасибо большое!

Переверстал с доктайпом <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> и многие проблемы с пикселями ушли.

Но самая главная проблема все равно осталась. Таблица не поднимается вверх отрицательным margin-top в FF и IE.

В Опере и Хроме все правильно.

10037_Безымянghjный.png

И еще одна проблема.

Полосатый фон почему-то сдвигается полоской наверху.

Почему так происходит?

Сайт заключен в <body><div id="body"></div></body>

CSS:

html, body  {
margin: 0;
padding: 0;
background: #fafafa url(_bg.png); 
background-attachment: scroll;
width:100%;
height:100%;
color:#000;
font: 10pt Verdana, Arial, Helvetica, sans-serif;
}

#body {
max-width: 760px;
width:expression(document.body.clientWidth > 760 ? "760px": "auto" );
margin:10px auto;
}

Edited July 1, 2011 by 7ion

psywalker · July 1, 2011

Погоди-ка, я щас так глянул, у тебя ж там отступ стоит верхний, зачем?

#body {
    margin: 10px auto;

7ion · July 1, 2011

Погоди-ка, я щас так глянул, у тебя ж там отступ стоит верхний, зачем?
#body {
    margin: 10px auto;

Ну да, верхний и нижний, чтобы сайт не лип к верху, чтоб там было пространство.

Но ведь фон от этого не должен съезжать.

И мне все-таки главней притянуть таблицу на ее место в FF и IE.

Vlad · July 1, 2011

У вас несколько неправильно свёрстан блок header, из-за него и возникают отступы. Часть текст располагается ниже блока, а вы этот текст сдвигаете вверх, но пустое место под ними остаётся. Сделайте так. Установите для header относительное позиционирование, а для внутренних элементов абсолютное. Тогда вы сможете задавать им точные координаты относительно родителя header.

psywalker · July 1, 2011

Погоди-ка, я щас так глянул, у тебя ж там отступ стоит верхний, зачем?
#body {
    margin: 10px auto;
Ну да, верхний и нижний, чтобы сайт не лип к верху, чтоб там было пространство.
Но ведь фон от этого не должен съезжать.
И мне все-таки главней притянуть таблицу на ее место в FF и IE.

Там у тебя неоткуда им взяться. Перед доктайпом убери пустое пространство.

Vlad · July 1, 2011

У вас несколько неправильно свёрстан блок header, из-за него и возникают отступы. Часть текст располагается ниже блока, а вы этот текст сдвигаете вверх, но пустое место под ними остаётся. Сделайте так. Установите для header относительное позиционирование, а для внутренних элементов абсолютное. Тогда вы сможете задавать им точные координаты относительно родителя header.

7ion · July 1, 2011

У вас несколько неправильно свёрстан блок header, из-за него и возникают отступы. Часть текст располагается ниже блока, а вы этот текст сдвигаете вверх, но пустое место под ними остаётся. Сделайте так. Установите для header относительное позиционирование, а для внутренних элементов абсолютное. Тогда вы сможете задавать им точные координаты относительно родителя header.

Спасибо большое, переверстал как вы сказали и все заработало!

Теперь буду знать, что относительные элементы можно позиционировать от абсолютного, раньше я этого не знал.

Вот значит в чем разница static и absolute

Теперь хочу лишь узнать, как пофиксить эту маленькую деталь:

10038_Снимкенок.PNG

Откуда берется этот шов?

<body><div class="body"></div></body>

html, body  {
margin: 0;
padding: 0;
background: #fafafa url(_bg.png); 
background-attachment: scroll;
width:100%;
height:100%;
color:#000;
font: 10pt Verdana, Arial, Helvetica, sans-serif;
}
#body {
max-width: 760px;
width:expression(document.body.clientWidth > 760 ? "760px": "auto" );
margin:10px auto;
}

Sign In

Не могу достичь кроссбраузерности

Question

7ion

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

7ion

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

7ion

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

7ion

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information