VPF::Необъяснимое вульгарно-варварское поведение осла

InfMag

Дата 29.1.2009, 16:24 (ссылка)

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

Загрузка ...

…

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

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

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

Internet Explorer как всегда преподносит сюрпризы и в очередной раз меня он не обделил сием.
В общем я сразу залил верстку на отдельную страницу чтобы все можно было лицезреть в факте:

http://lotsmanov-va.narod.ru/tehnoservis/

В общем смотрим сначала в опере или фоксе, потом открываем осла и видим непонятный отступ снизу, вообще неизвестно откуда взявшийся, тут и не с двойным margin-ом проблема в ie, тут что-то иное.

Вот на всякий код и описание стилей:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>ТехноСервис</title>
<link href="template_styles.css" type="text/css" rel="stylesheet" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="topmenu.css" type="text/css" rel="stylesheet" />
<script type="text/javascript"><!--
    var SITE_TEMPLATE_PATH = "";
//--></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
<![if gte IE 5.5]>
<script type="text/javascript" src="js/fixpng.js"></script>
<link href="ie.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/ie.js"></script>
<![endif]>
<![endif]-->
</head>

<body>

<div id="general_container">

<div id="header">
<div id="content">
<div id="topmenu">


<div id="topmenu_opened">
<div id="topmenu_opleft"></div>
<div id="topmenu_opright"></div>
<a href="#">О компании</a>
</div>

<div id="topmenu_item">
<a href="#">Продукция</a>

</div>

<div id="topmenu_item">
<a href="#">Услуги</a>
</div>

<div id="topmenu_item">
<a href="#">Персонал</a>
</div>

<div id="topmenu_item">
<a href="#">Контакты</a>
</div>

</div>
<div id="header_leftblock">
<div id="header_left" class="iePNG">
<div>
<a href="#" title="На главную"><img src="images/speed_buttons/home_on.png"></a>
<a href="#" title="Карта сайта"><img src="images/speed_buttons/map_off.png"></a>
<a href="#" title="Написать нам"><img src="images/speed_buttons/mail_off.png"></a>
</div>
</div>
<div id="header_center" class="iePNG"></div>
</div>
</div>
</div>


<div id="content" class="content_blocks">

<div id="leftblock">

<div align="center"><a href="#" title="Официальный сайт ТехноСервиса"><img src="images/logo.png" width="163" height="222" /></a></div>

</div>

<div id="centerblock">
<div id="content">

<div id="section_photo">
<div id="section_photo_r"></div>
<div id="section_phone" title="Позвоните нам!"></div>
<img src="images/section_photos/sections/home.png" width="421" height="247" />
</div>

qwgjniqoeghq ioghq ioghqi ghwioq hwhqoh
oqihioqhqio qiowghiowqh

<!--qio hiqghqioh owiqhio ghqwiogh ohwgh qwgoh qowhoi1h5iohio
5h1o2h5o1i25h 1io5 125h 1oi25h 125oi 12io5h 1oi25h1io25io1 h1oi2h5
qwgjniqoeghq ioghq ioghqi ghwioq hwhqohoqihio
qhqio qiowghiowqhqio hiqghqioh owiqhio ghqwiogh ohwgh qwgoh qowhoi1
h5iohio5h1o2h5o1i25h 1io5 125h 1oi25h 125oi 12io5h 1oi25h1io25io1 h1oi2h5
<h1>H1 Заголовок</h1>
<h2>H2 Заголовок</h2>
<h3>H3 Заголовок</h3>
<h4>H4 Заголовок</h4>
<h5>H5 Заголовок</h5>
<h6>H6 Заголовок</h6>
<h1>H1 Заголовок</h1><h2>H2 Заголовок</h2><h3>H3 Заголовок</h3>
<h4>H4 Заголовок</h4><h5>H5 Заголовок</h5><h6>H6 Заголовок</h6>
<h1>H1 Заголовок</h1><h2>H2 Заголовок</h2><h3>H3 Заголовок</h3>
<h4>H4 Заголовок</h4><h5>H5 Заголовок</h5><h6>H6 Заголовок</h6>
<h1>H1 Заголовок</h1><h2>H2 Заголовок</h2><h3>H3 Заголовок</h3>
<h4>H4 Заголовок</h4><h5>H5 Заголовок</h5><h6>H6 Заголовок</h6>
<h1>H1 Заголовок</h1><h2>H2 Заголовок</h2><h3>H3 Заголовок</h3>
<h4>H4 Заголовок</h4><h5>H5 Заголовок</h5><h6>H6 Заголовок</h6>
<h1>H1 Заголовок</h1><h2>H2 Заголовок</h2><h3>H3 Заголовок</h3>
<h4>H4 Заголовок</h4><h5>H5 Заголовок</h5><h6>H6 Заголовок</h6>-->

123123
123123

</div>
</div>

</div>



<div id="bottom_content">
<div id="content">
GHUOewghuw hgwegh wghoe woihgweoghw owegohi oiwe
</div>
</div>


</div>

<div id="footer">
<div id="content">
<div id="footer_left">
<span>Сделано в Интернет-агенстве</span>
</div>
<div id="footer_center"></div>
</div>
</div>

</body>
</html>

Код


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;
}

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

div#content
{
    float: left;
    width: 100%;
    /*margin-right: -200px;*/
}

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: 190px; /* -14 */
    height: 72px;
    background: url(images/header_leftbg.png) repeat-x;
    float: left;
}

div#header_left div
{
    position: absolute;
    top: 52px;
    left: 9px;
    width: 190px;
    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: 174px;
    height: 100%;
    padding: 20px;
    /*background-color: #EAEAEA;*/
}

div#centerblock
{
    height: 100%;
    padding: 20px;
    padding-left: 0;
    padding-right: 0;
    margin-left: 221px;
    margin-bottom: 57px;
    padding-top: 15px;
    /*background-color: #CCC;*/
}

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

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

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

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

div#bottom_content
{
    position: relative;
    clear: both;
}

div.clear25
{
    position: relative;
    clear: both;
    margin-bottom: 25px;
}

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

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

div#footer_left span
{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 20px;
    left: 6px;
    font-size: 10px;
    color: #ff0000;
    white-space: nowrap;
}

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

InfMag

Дата 29.1.2009, 17:35 (ссылка)

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

Загрузка ...

…

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

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

О! Падаю на колени и прошу прощения!
В стиле div#centerblock нашел margin

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