VPF::Как решить проблему position: absolute в IE?

BaRRdAk

Дата 23.11.2006, 09:55 (ссылка)

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

Загрузка ...

Новичок

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

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

Всем привет!
Старался обходить этот недостаток IE но тут приспичило мне все таки использовать position: absolute. Со всеми браузерами проблем нет а с IE все хреново.
Проблема такая ... есть контейнер фиксированной ширины .... в нем два контейнера со свойством position: absolute.
При изменении размера окна контейнеры остаются на месте и возвращаются на свое место только после обновления страницы.
Есть ли способ побороть это без JS? И если нет то как сделать это с помощью JS?
Вообще уже назрело желание отказаться от верстки полностью в CSS и перейти к таблицам ..... не все еще можно сделать дивами учитывая ограниченную поддержку браузерами.

HTML

<body id="cityTrust">
    <div id="header">
      <div id="topLeft">
        <div id="siteName">
          <h1>Юридическое агентство</h1>
        </div>
        <div id="slogan">
          <h3>Город доверия</h3>
        </div>
      </div>
      <div id="topRight">
        <div id="nav_container">
          <ul id="nav">
            <li id="about"><a href="index.html" class="selected">Главная</a></li>
            <li id="registration"><a href="registration.html">Услуги</a></li>
            <li id="catalog"><a href="catalog.html">Готовые фирмы</a></li>
            <li id="info"><a href="info.html">Информация</a></li>
          </ul>
        </div>
       </div>
    </div>
</body>

Код


#cityTrust {font-family: arial,verdana,sans-serif; background: #FFFFFF; width:780px; margin: 0 auto;}

#header {width:750px; margin: 0 auto; height: 297px; background: url(../image/back.jpg) top repeat-x;}

#topLeft {float: left;}

#topRight {float: right;}

#siteName { z-index: 6; position: absolute; float: left; margin-left: 5px; padding:0; text-indent: -5000px; background:url(../image/logo.gif) top left no-repeat; width: 150px; height: 153px;}
#slogan { z-index: 5; position: absolute; top: 76px; float: left; margin: 0; padding:0; text-indent: -5000px; background: url(../image/city.jpg) bottom left no-repeat; width: 631px; height: 220px;}

Это сообщение отредактировал(а) BaRRdAk - 23.11.2006, 10:44

zera

Дата 23.11.2006, 11:51 (ссылка)

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

Загрузка ...

Бывалый

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

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

а относительно чего работает position:absolute?
код вообще не совсем понятен. зачем text-indent:-5000?
на всякий случай:

Код


<body><div id="cityTrust">...

и в css

Код


      body {padding:0;margin:0;}
      #topLeft {float: left; position:relative;}

это так я понял изначальную задачу

BaRRdAk

Дата 23.11.2006, 12:03 (ссылка)

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

Загрузка ...

Новичок

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

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

Спасибо

Я понял свою ошибку. В тег <body> никаких ID ставить нельзя.
Правильно?
Как ни странно все заработало smile

zera

Дата 24.11.2006, 15:48 (ссылка)

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

Загрузка ...

Бывалый

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

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

Цитата(BaRRdAk @ 23.11.2006, 12:03

)

Я понял свою ошибку. В тег <body> никаких ID ставить нельзя.

да почему нельзя, можно.

Цитата(BaRRdAk @ 23.11.2006, 12:03

)

Как ни странно все заработало

вот это как раз не странно smile

BaRRdAk

Дата 25.11.2006, 01:10 (ссылка)

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

Загрузка ...

Новичок

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

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

да и ни к чему они там эти id ..... так просто до кучи воткнул и не подумал.

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