VPF::Блочная резиновая верстка и причуды IE

InfMag

Дата 6.2.2009, 14:58 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4

Доброго времени суток.

Возникла проблема с двумя ослами при блочной верстке. FF и Опера не подводят, все нормально, но как я ни ломался с IE6 никак до конца нормально не могу выбраться, а тут решил провериться в IE7 и понял что он живет совершенно другой жизнью в отличии от IE6, причем со своими исправлениями, но и не меньшим количеством новых косяков.

Вот по этой ссылке выложил верстку http://lotsmanov-va.narod.ru/ts/

Даже с ГуглХромом все в поряде. Там две страницы, Главная и О Компании в верхнем меню. Дык вот, в IE7 ваще с футером непонятные вещи творяться, делал по ГОСТУ как говорится, а теперь не знаю что делать чтобы он нормально это отображал. В IE6 на странице О Компании не отображается контент, как будто скрыт. Вообще в этих IE творятся необъяснимые и не логичные вещи, по моему если бы сожгли Microsoft и уничтожили IE, то версткой мог бы заниматься простой компьютерный обыватель, вся сложность с гемором в IE заключается вечно сколько раз делал.

Вот основные стили:

styles.css

Код


html, body
{
    width: 100%;
    height: 100%;
    min-width: 990px;
}

html, body, form, p, div, span
{
    margin: 0;
    padding: 0;
}

body
{
    background-color: #fff;
    color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

a
{
    text-decoration: underline;
    color: #fe0000;
}

a:hover
{
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, ul, ol, li
{
    margin: 0;
    padding: 0;
}

img
{
    border: 0;
}

input, select, option, textarea
{
    background-color: #fff;
    color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

h1, h2, h3, h4, h5, h6
{
    color: #fe0000;
}

h1 {font-size: 18px; font-weight: normal; margin-bottom: 20px;}
h2 {font-size: 14px;}
h3 {font-size: 12px;}
h4 {font-size: 10px;}
h5 {font-size: 9px;}
h6 {font-size: 8px;}

p
{
    margin-bottom: 20px;
}

div.block
{
    float: left;
    width: 100%;
}

div.clear25
{
    clear: both;
    height: 25px;
}

div.clear
{
    clear: both;
}

p.title_block_gray
{
    
    background: url(images/title_block_gray.png) no-repeat;
    color: #fff;
    width: 135px;
    height: 20px;
    clear: both;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding-top: 1px;
}

/* RedBlock */

div.redblock_title
{
    width: 132px; /* 172 - padding-left */
    height: 30px; /* 45 - padding-top */
    background: url(images/redblock/top.png) no-repeat;
    clear: both;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding-top: 15px;
    text-align: left;
    padding-left: 40px;
}

div.redblock_content
{
    width: 152px; /* 172 - paddings */
    background: url(images/redblock/bg.png) repeat-y;
    clear: both;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    padding-bottom: 10px;
}

div.redblock_content img
{
    border: 1px solid #58585a;
}

div.redblock_close
{
    width: 172px;
    height: 8px;
    background: url(images/redblock/bottom.png) no-repeat;
    clear: both;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 25px;
}

/* END RedBlock */

/* News */

div.news-title
{
    margin-bottom: 10px;
}

div.news-date
{
    float: right;
    font-size: 10px;
}

/* END News */

template_styles.css

Код


div#general_container
{
    position: relative;
    width: 100%;
    height: 100%;
}

div#header
{
    position: relative;
    left: 0;
    top: 0;
    clear: both;
    width: 100%;
    height: 72px;
    background: url(images/header_bg.png) repeat-x;
    z-index: 50;
}

div#header_leftblock
{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

div#header_left
{
    width: 210px; /* -15 */
    height: 72px;
    background: url(images/header_leftbg.png) repeat-x;
    float: left;
}

div#header_left div
{
    position: absolute;
    top: 52px;
    left: 9px;
    width: 210px;
    text-align: center;
}

div#header_left a
{
    margin-left: 17px;
    margin-right: 17px;
}

div#header_left img
{
    width: 23px;
    height: 19px;
}

div#header_center
{
    width: 49px;
    height: 72px;
    background: url(images/header_center.png) no-repeat;
    float: left;
}

div#leftblock
{
    float: left;
    width: 200px;
    padding: 20px;
}

div#centerblock
{
    height: 100%;
    margin-left: 240px;
    padding-top: 15px;
}

div#section_photo
{
    position: relative;
    width: 100%;
    height: 240px;
    background: url(images/sections/bg.png) repeat-x;
    margin-bottom: 10px;
}

div#section_photo_r
{
    float: right;
    width: 5px;
    height: 240px;
    background: url(images/sections/right.png) no-repeat;
}

div#section_phone
{
    position: absolute;
    float: right;
    width: 232px;
    height: 36px;
    right: 20px;
    top: 20px;
    background: url(images/sections/phone.png) no-repeat;
}

div#section_photo img
{
    position: absolute;
    left: 0;
    top: 0;
}

div#search_form
{
    position: relative;
    display: inline;
    float: right;
    width: 228px;
    height: 25px;
    background: url(images/search.png) no-repeat;
    margin-bottom: 15px;
    margin-right: 15px;
}

input#search_text
{
    margin: 0; padding: 0; border: 0;
    position: absolute;
    left: 7px;
    top: 5px;
    width: 190px;
    background: none;
}

input#search_submit
{
    margin: 0; padding: 0; border: 0;
    position: absolute;
    left: 208px;
    top: 3px;
    width: 20px;
    height: 19px;
    background: none;
}

div#navigation
{
    float: left;
    color: #fe0000;
    margin-top: 8px;
}

table#content_table
{
    border: 0; margin: 0; padding: 0;
    width: 100%;
    border-collapse: collapse;
}

td#content
{
    border: 0; margin: 0; padding: 0;
    vertical-align: top;
    padding-right: 20px;
}

td#rightblock
{
    border: 0; margin: 0; padding: 0;
    width: 200px;
    vertical-align: top;
    padding-right: 20px;
}

div#bottom_content
{
    position: relative;
    clear: both;
    padding-left: 20px;
    padding-right: 20px;
}

div#section_content
{
    position: relative;
    clear: both;
    padding-left: 20px;
}

div#before_footer
{
    height: 57px;
    clear: both;
}

div#footer
{
    position: relative;
    height: 57px;
    margin-top: -57px;
    clear: both;
    background: url(images/footer_rightbg.png) repeat-x;
}

div#footer_left
{
    position: relative;
    float: left;
    width: 225px; /* +15 */
    height: 57px;
    background: url(images/footer_leftbg.png) repeat-x;
}

div#footer_center
{
    float: left;
    width: 30px;
    height: 57px;
    background: url(images/footer_center.png) no-repeat;
}

div#footer_counter
{
    position: absolute;
    right: 20px;
    top: 14px;
}

div#footer_rightcopy
{
    position: absolute;
    right: 125px;
    top: 7px;
    color: #fff;
    font-size: 18px;
    white-space: nowrap;
    text-align: right;
}

div#footer_mncopytxt
{
    position: absolute;
    left: 10px;
    top: 6px;
    font-size: 10px;
    color: #fe0000;
    white-space: nowrap;
}

Кто - что подскажет по поводу сего сабжа?

Это сообщение отредактировал(а) InfMag - 6.2.2009, 15:03

bars80080

Дата 6.2.2009, 17:02 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата(InfMag @ 6.2.2009, 13:58

)

Вообще в этих IE творятся необъяснимые и не логичные вещи, по моему если бы сожгли Microsoft и уничтожили IE, то версткой мог бы заниматься простой компьютерный обыватель, вся сложность с гемором в IE заключается вечно сколько раз делал.

встречая каждый раз подобное заявление всегда отвечаю: верстал бы изначально не под ФФ, а под ИЕ, плевался бы на ФФ, у которого глюков не меньше

могу дать только один совет: очистить контент и оставить пустой каркас страницы (если он у тебя там подключается, то не проблема) и посмотреть, нормально ли он воспринимает ли основу страницы. (сам приём с футером безошибочный, я его прогонял и в 6 и в 7 версии). если всё нормально, то подключая блок за блоком посмотреть, какой из них разваливает вёрстку

и на будущее. искать вот так уже в самом конце - бессмысленное занятие. надо проверять на кроссбраузерность по окончанию каждого узла.

Добавлено через 24 секунды

Цитата(InfMag @ 6.2.2009, 13:58

)

по ГОСТУ

спорим нет

InfMag

Дата 8.2.2009, 12:29 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4

bars80080, я проверял, в принципе все работало. Только вот потом подумал об IE7. А насчет FF не согласен, в IE напорядок больше глюков, да теже стандарты W3C извините для компании Mircosoft не писаны, у них свои правила, вне логики. Насчет по ГОСТУ это я про прием с футером, делал по инструкции.

InfMag

Дата 8.2.2009, 13:07 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4

Я вот и так пробовал прописывать * html #general_container, но не помогло. С 6 ослом я думаю поборюсь, а вот что мне делать с IE7 не знаю. С этим футером.

InfMag

Дата 8.2.2009, 16:22 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4

Так, в IE6 трабл решил, во втором разделе структура чуть иная и я в следующем коде просто убрал лишний <div class="block">:

Код


<div class="block">
<div id="navigation"><a href="#">Главная</a> | <a href="#">О компании</a></div>
<div id="search_form">
<form action="/search/" method="post" id="search_frm" onsubmit="if(!speedsearch())return!1;">

<input type="text" name="q" value="что ищем?" id="search_text" onfocus="if(!search_change){this.value='';search_change=true;}" />
<input type="image" src="images/blank.gif" id="search_submit" title="Найти!" />
</form>
</div>
</div>

Но IE7 по прежнему остался загадочным, так и не могу понять как ему объяснить что 100% это полная высота вместе со всем контентом, а не только видимого куска экрана.

bars80080

Дата 9.2.2009, 01:02 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата(InfMag @ 8.2.2009, 11:29

)

теже стандарты W3C извините для компании Mircosoft не писаны. у них свои правила, вне логики

а я бы поставил вопрос по другому. почему некая организация придумывает стандарты не совпадающие с наиболее популярной технологией?

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

InfMag

Дата 9.2.2009, 10:33 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4

bars80080, да это все не проблема, дело ведь не в этом. Сейчас никакого разъезда нет. Тут появилась проблема в IE7, он под 100% понимает высоту видимой области экрана, а не общую высоту, вот и не знаю как ему объяснить обратное((

Violator

Дата 9.2.2009, 12:41 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

поставьте в div#general_container не height, а min-height, и для ИЕ6 пропишите класс

InfMag

Дата 9.2.2009, 12:56 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4

Violator, большое спасибо! помогло!

Код


div#general_container
{
    position: relative;
    width: 100%;
    min-height: 100%;
}

* html div#general_container
{
    height: 100%;
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »