VPF::Ломается резиновая верстка в IE6

KonstRuctor

Дата 13.5.2008, 22:12 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

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

Доброго времени суток!
Есть простенький шаблон, все нормально работает, за исключением просмотра в IE6.
1) Не понятно, почему не срабатывает width: expression((.... для минимальной ширина сайта, в то время как такое же правило для максимальной -- срабатывает. (P.S. у меня есть решение -- яваскрипт minmax.js, при его подключении все работает, просто хочу разобраться).
2) Таблица в главной колонке уходит вниз на уровень левой навигации.
Как это побороть?
Помещаю отдельно код html, css и ссылку на работающий пример.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Сайт в две колонки</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link href="common.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">

    <div id="header">
    Хейдер сайта. Лого и главная навигация
    </div> <!-- кончился header -->
    
    <div id="sidebar">
        <div class="menuha">
        <h1>Навигация</h1>
        <a href="#">Ссылка 1</a>
        <a href="#">Ссылка 1</a>
        <a href="#">Ссылка 1</a>
        </div>    
    </div> <!-- кончился sidebar -->
    
    <div id="main">
        <h1>Заголовок главного раздела</h1>
        <table width="100%" class="tablica">
            <tr>
                <th colspan="2">Заголовок таблицы</th>
            </tr>
            <tr>
                <td>Ячейка</td>
                <td>Заполнение таблицы</td>
            </tr>
            <tr>
                <td>Ячейка</td>
                <td>Заполнение таблицы</td>
            </tr>
            <tr>
                <td>Ячейка</td>
                <td>Заполнение таблицы</td>
            </tr>
        </table>        
    </div> <!-- кончился main -->
    
    <div id="cleaner"></div>
    
    <div id="footer">
    Футер сайта. Копирайты и всякая ерунда
    </div> <!-- кончился footer -->

</div> <!-- кончился wrap -->
</body>
</html>

Код



body{
    margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        background-color: #E6E6E6;
    font-size:1em;
        line-height:1.25em;
}
#wrap {
    margin:0 auto;
    min-width: 980px;
    width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 980 ? '980px' : 'auto'); /* для ИЕ */
    max-width: 1200px;
    width: expression((documentElement.offsetWidth || document.body.offsetWidth) > 1200 ? '1200px' : 'auto'); /* для ИЕ */
    background-color: #C6D0C4;
    border: 1px solid black; /* рамка */
}
#header {
    font-size: 2em;
    font-weight:bold;
    color: white;
    text-align:center;
    padding: 20px;
    background-color: #444;
    border: 1px solid black; /* рамка */
}
#sidebar {
    float:left; /* менюха */
    width:200px;
    padding: 8px; /* отступы внутрь контейнера */
    background-color: #BBB;
        border: 1px solid orange; /* рамка */
}
#main {
    margin-left:230px; /* главный контейнер*/
    padding: 8px; /* отступы внутрь контейнера */
    border: 1px solid blue; /* рамка */
    text-align: center; /* по центру */
}
#cleaner{
        clear: both;
        height: 0;
        overflow: hidden;
        line-height: 0;
        font-size: 0;
    border: 1px solid red; /* рамка */
}
#footer {
    padding: 6px 0 6px 0;
    background-color: #666;
    color: white;
    text-align:center;
    border: 1px solid black; /* рамка */
}
.menuha{
    border: 1px solid yellow; /* рамка */
}
.menuha a {
    display:block;
    margin: 0 0 3px 6px;
}
.menuha h1 {
    display:block;
    background-color: #333;
    color: white;
    padding: 6px;
    margin: 0 0 3px 0;
    font-size: 1.7em;
}
.tablica {
    border-collapse: collapse; 
    border-spacing: 0;        
    border: 1px solid #333; /* рамка */
}
.tablica td {
    border: 1px dashed black;
}
h1 {
    margin: 6px 0 12px 0;
}

SergV

Дата 15.5.2008, 12:37 (ссылка)

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

Загрузка ...

Бывалый

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

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

Потому что IE6 и другие браузеры по разному реагируют на некоторые стили, и в частности размеры для ширины и высоты, в IE6 и других браузерах разными получаются.
Используй !important в ксс, сначало задавай размер для других браузеров с !important, а следом размеры для IE6. Это касается всех стилей, что в осле не так срабатывают.
пример

Код


.class {
width: auto!important; // для всех браузеров в том числе и IE7
width: 99%; //только для IE6
}

а насчет скрипта не скажу, я в ява скриптах не спец.

Это сообщение отредактировал(а) SergV - 15.5.2008, 12:41

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