VPF::Блочная верстка и "ноги" - Форум программистов

InfMag

Дата 27.1.2009, 13:54 (ссылка)

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

Загрузка ...

…

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

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

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

Столкнулся с проблемой, верстка блочная, мне нужно прибить футер к низу страницы, а также сделать minwidth понимаемый ослом. Далее покажу как я это реализовываю. Но в общем злорадный адски-дъявольский Microsoft Internet Explorer при размерах по ширине меньше нужного выдает не только горизонтальный скрул, но и вертикальный и "ноги" оказываются под горизонтальным скрулом. Покажу на скриншоте.

index.html

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<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">
<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="document_minwidth"><img src="images/blank.gif"></div>

<div id="general_container">
<div id="gereral_content">

<div id="header">123</div>

    <h1>H1 Заголовок</h1>
    <h2>H2 Заголовок</h2>
    <h3>H3 Заголовок</h3>
    <h4>H4 Заголовок</h4>
    <h5>H5 Заголовок</h5>
    <h6>H6 Заголовок</h6>

</div>
</div>

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

</body>
</html>

styles.css

Код


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

img
{
    border: 0;
}

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

div#document_minwidth
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
}

div#document_minwidth
{
    width: 990px;
    height: 1px;
}

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

div#general_content
{
    padding-bottom: 57px;
}

div#header
{
    position: relative;
    clear: both;
    width: 100%;
    height: 72px;
}

div#footer
{
    height: 57px;
    margin-top: -57px;
    clear: both;
}

div#footer_left
{
    position: relative;
    float: left;
    width: 190px;
    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;
}

div#footer_right
{
    height: 57px;
    background: url(images/footer_rightbg.png) repeat-x;
}

ie.css

Код


.iePNG, img
{
    filter: expression(fixPNG(this));
}

js/script.js

Код


var d = document;

js/ie.js

Код


/*var winIE = (navigator.userAgent.indexOf("Opera")==-1 && (d.getElementById && d.documentElement.behaviorUrns)) ? true : false;

function bodySize()
{
    if (winIE && d.documentElement.clientWidth)
    {
        sObj = d.getElementsByTagName("body")[0].style;
        sObj.width = (d.documentElement.clientWidth<960) ? "960px" : "100%";
    }
}

function init()
{
    if (winIE) bodySize();
}

onload = init;

if (winIE) onresize = bodySize;*/

js/fixpng.js

Код


// fixPNG(); http://www.tigir.com/js/fixpng.js (author Tigirlas Igor)
function fixPNG(element)
{
    if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
    {
        var src;
        
        if (element.tagName=='IMG')
        {
            if (/\.png$/.test(element.src))
            {
                src = element.src;
                element.src = "images/blank.gif";
            }
        }
        else
        {
            src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i)
            if (src)
            {
                src = src[1];
                element.runtimeStyle.backgroundImage="none";
            }
        }
        
        if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
    }
}

Присоединённый файл ( Кол-во скачиваний: 12 )

vingrad_screen01.jpg 28,69 Kb

InfMag

Дата 27.1.2009, 14:11 (ссылка)

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

Загрузка ...

…

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

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

Переделал minwidth для IE, раскомментировал js/ie.js, но суть не в этом, суть в том чтобы убрать скруллер вертикальный.

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