Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Проблеммы с IE

Автор: bazzjr 22.7.2009, 12:02

Всем привет!

есть код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>DOCTYPE</title>
    <style type="text/css">
        html, body {
            height: 100%;
            width:  100%;
            overflow: hidden;
            
            border:0;
            padding:0;
            margin:0;
        }
    </style>
</head>

<body>
    <div style="height: 50%;">
        <table cellpadding=0 cellspacing=0 style="width: 100%; height: 100%; background-color: red;"  border=1>
            <tr>
                <td height="50px">тут всегда по высоте 50рх(а сейчас резиниться)</td>
            </tr>
            <tr>
                <td>вот эта часть должна быть по высоте</td>
            </tr>
            <tr>
                <td height="50px">тут всегда по высоте 50рх(а сейчас резиниться)</td>
            </tr>
        </table>
    </div>
    <div style="height: 50%;">
        <table cellpadding=0 cellspacing=0 style="width: 100%; height: 100%; background-color: green;"  border=1>
            <tr>
                <td style="width: 50px">50px width</td>
                <td >bottom</td>
                <td width="50px">50px width</td>
            </tr>
        </table>
    </div>
</body>
</html>

Вопрос - как сделать так, чтобы в ИЕ в красной таблице не резинились ячейки там, где написанно по 50рх?
Т.е. сделать так, чтобы средняя ячейка в красной таблице резинилась по высоте и состовляла высоту таблицы(красной) -(минус) 50рх и -(минус) 50 рх?

Автор: WebDisaster 22.7.2009, 14:51

Вот нифига не понял:

1. Какую версию ишака дрессируем?
2. Нужен именно стандартный режим? Если нет, то добавьте первой строкой файла xml-декларацию

Код


<?xml version="1.0" encoding="utf-8"?>

можно вставить туда же пустой комментарий, или что угодно другое.

3. Если нужен именно стандартный режим, тогда непонятно, зачем таблица?

Автор: bazzjr 22.7.2009, 16:19

Дрессируем все версии ИЕ smile

Режим все равно какой.

Спасибо!
Твой варик прокатывает на ИЕ6, ИЕ5, ИЕ8, на ИЕ7 почемуто не хочет робить, в чем может быть дело? ...

и помоему строчка <?xml version="1.0" encoding="utf-8"?> просто отменяет DOCTYPE ? а DOCTYPE нужен...

Автор: WebDisaster 22.7.2009, 17:45

Цитата(bazzjr @ 22.7.2009, 16:19

)

ИЕ6, ИЕ5, ИЕ8, на ИЕ7

IE5 это какой? v.5.01? v.5.5? Они отличаются весьма и весьма. Но в любом случае, с IE5 я не помощник. Я на него давно и наглухо забил. Даже те, кто ещё живёт в Win98, давно имели возможность поставить себе хотя бы IE6 (а скорее оперу =). По моей статистике (Google Analytics) IE 5.01+5.5 вместе взятые дают меньше 0,3% посетителей (а количество верстальной работы как минимум удваивают). Поэтому плиз их нафиг.

Цитата(bazzjr @ 22.7.2009, 16:19

)

строчка <?xml version="1.0" encoding="utf-8"?> просто отменяет DOCTYPE ? а DOCTYPE нужен

Отменяет это не совсем верно, этим IE переключается в режим QuirksMode (вместо стандартного, про который я спрашивал).
Если нужен стандартный режим я бы от таблиц отказался.

Автор: bazzjr 23.7.2009, 10:13

WebDisaster можешь накидать примерчик без таблицы (если есть время и возможность)?

Автор: WebDisaster 24.7.2009, 15:17

Цитата(bazzjr @ 23.7.2009, 10:13

)

можешь накидать примерчик без таблицы

bazzjr, а как должны себя вести блоки при переполнении (если оно возможно), я, видимо, должен догадаться сам?
Верхнюю таблицу заменил.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>DOCTYPE</title>
<style type="text/css">
html, body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        border:0;
        padding:0;
        margin:0;
}

* {
    padding:0;
    margin:0;
}
.wrapper {
    height:50%;
    background-color:#f00;
    position:relative;
}
.top-top {
    height:50px;
    width:100%;
    position:absolute;
    top:0;
    background-color:#099;
}
.top-middle {
    padding:50px 0;
    overflow:hidden;
}
.top-bottom {
    height:50px;
    width:100%;
    position:absolute;
    bottom:0;
    background-color:#093;
}
</style>
</head>

<body>
    <div class="wrapper">
        <div class="top-top">тут всегда по высоте 50рх</div>
        <div class="top-middle">вот эта часть должна быть по высоте</div>
        <div class="top-bottom">тут всегда по высоте 50рх</div>
    </div>
    <div style="height: 50%;">
        <table cellpadding=0 cellspacing=0 style="width: 100%; height: 100%; background-color: transparent;"  border=1>
            <tr>
                <td style="width: 50px">50px width</td>
                <td >bottom</td>
                <td width="50px">50px width</td>
            </tr>
        </table>
    </div>
</body>
</html>

Автор: bazzjr 24.7.2009, 15:53

Спасибо WebDisaster, то что надо, только бы для идеала и нижнюю часть с таблицей заменить на дивы.

А в блоках при переполнении появляется полоса прокрутки, т.е. вся информация у нас будет всегда на одном экране.

Автор: SelenIT 24.7.2009, 18:19

BTW, такого

Цитата

не бывает. Или width="50", или (лучше) style="width:50px". Не надо путать CSS-ные размерности с HTML-ными атрибутами.