"Пропажа" слоя в 6 эксплорере.

N-Mak · January 4, 2008

Господа, столкунулся с проблемой, которая меня совершенно в тупик поставила.

Суть ее в том, что абсолютно спозиционированная форма прекрасно (и в нужном месте) отображается во всех браузерах кроме 6 Эксплорера. В нем ее просто как будто нет.

На самом деле она, конечно есть и ее видно в коде, но она совершенно не взаимодействует со страницей. Т.Е. можно сделать высоту 20 000 px, ширину похожую, бэкграунд выкрасить в любой цвет,отступы любые сделать - это никак на страницу не повлияет. Стоит только сделать position: static как форма проявляется на своем месте и прекрасно отображается. Кроме того, такая же картина наблюдается если указать форме position: relative. Напомню, что это происходит только в 6 Эксплорере.

Весь код не прикладываю - он большой очень и я просто не знаю на что грешить. Вот мой шаблон, на основе которого верстал:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Шаблон трехколоночный</title>
<style type="text/css">
/*Общие*/
* {margin: 0; padding: 0;} /*Обнуляем нафик все*/
body {position: relative; min-height: 100%;} /*Установки для футера*/
*html body {height: 100%;} /*Привет 6 Ослу*/
html {height: 100%;} /*Установки для футера*/

/*Позиции*/
div#header{
  position:relative}
div#conteiner{
  position: relative; width:100%}
*html #conteiner{
  margin-left: -250px; } /*Исправляем глюк в ИЕ6*/
div#content{
  float:left;
  margin: 0 250px 0 250px}
div#left{
  background:#336699;
  float:left;width:250px;margin-left:-100%}
div#right{
  background:#66FFFF;
  float:left;width:250px;margin-left:-250px}
div#footer{
  background: #0000FF;color: #FFF;
  position:absolute; bottom: 0;
  width:100%}
/*Text*/
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color:black;}
div#content p{line-height:1.4}
div#left p {color: white;}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
</style>
</head>
<body>
<div id="header"><h1>Заголовок</h1></div>

<div id="conteiner">
<div id="content">
<p><strong>1) Контент, статья.</strong> Исходя из уравнения Эйлера, серпантинная волна притягивает бозе-конденсат, все дальнейшее далеко выходит за рамки текущего исследования и не будет здесь рассматриваться. Лазер ясен не всем. Система координат фактурна. Брекчия, несмотря на то, что в воскресенье некоторые станции метро закрыты, многопланово осмысляет психологический параллелизм, хотя законодательством может быть установлено иное. Различное расположение диссонирует подвижный объект, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
<p>Бур традиционен. Вулканическое стекло, не учитывая количества слогов, стоящих между ударениями, деформирует экзотермический культовый образ, осознав маркетинг как часть производства. Между тем, действие определяет продуктовый ассортимент, в итоге приходим к логическому противоречию. Политическая психология, как следует из вышесказанного, вероятна.</p>
<p>Филиация реально вызывает бихевиоризм, откуда следует доказываемое равенство. Винил, либо из самой плиты, либо из астеносферы под ней, mezzo forte понимает под собой интеграл Гамильтона, что неудивительно. Рифма, и это следует подчеркнуть, приводит ролевой гравитационный парадокс, при этом нельзя говорить, что это явления собственно фоники, звукописи. Сомнение тормозит тоталитарный тип политической культуры, но известны случаи прочитывания содержания привед?нного отрывка иначе. Элювиальное образование одномерно вызывает эллиптический афтершок, хотя законодательством может быть установлено иное. Из комментариев экспертов, анализирующих законопроект, не всегда можно определить, когда именно поручительство восстанавливает законодательный дип-скай объект (отметим, что это особенно важно для гармонизации политических интересов и интеграции общества). </p>
</div>
<div id="left">
<p><strong>2) Навигация.</strong> Наследование активно. Необходимым и достаточным условием отрицательности действительных частей корней рассматриваемого характеристического уравнения является то, что ощущение мира огромно. Деградация начинает многомерный смысл жизни, именно поэтому голос автора романа не имеет никаких преимуществ перед голосами персонажей. Принимая во внимание искусственность границ элементарной почвы и произвольность ее положения в пространстве почвенного покрова, давление почвенной влаги недетерминировано интегрирует окисленный ортзанд, причем, вероятно, быстрее, чем прочность мантийного вещества.</p>
</div>
<div id="right">
<p><strong>3) Здесь всякая мутотень.</strong> Культ джайнизма включает в себя поклонение Махавире и другим тиртханкарам, поэтому информация существенно гарантирует невероятный красноз?м, механически интерпретируя полученные выражения. Высшая арифметика полифигурно редуцирует девиантный почвообразовательный процесс, перейдя к исследованию устойчивости линейных гироскопических систем с искусственными силами. Харизматическое лидерство, следовательно, отклоняет теплый катод при любой точечной группе симметрии. Отсюда естественно следует, что дискредитация теории катарсиса вероятна. Информационно-технологическая революция, несмотря на внешние воздействия, стремится к нулю.Б</p>
</div>
</div>
<div id="footer"><p>Это футер. Тут защищены наши права и обязанности. Копирование разрешено без ограничений.</p></div>

</body>
</html>

Краткое описание: трехколоночный, все колонки флоатнутые. Форма размещена в центральной колонке. Все колонки заключены в контейнер, спозиционированный relative. У колонок имеются несколько больших, в т.ч. отрицательных margin'ов, использованных для того, чтобы поменять местами колонки.

Подскажите, хоть в каком направлении копать.

klierik · January 5, 2008

разметку формы и ее стили приведите

maddogrts · January 5, 2008

уберите комментарии из кода может из за них

N-Mak · January 5, 2008

Вот полный кусок кода:

<div id="pagenation">
<br/><br/>

<form action="http://test1.ru/index.php?option=com_virtuemart&page=shop.browse&category_id=11&keyword=&manufacturer_id=0&Itemid=34&orderby=product_sku" method="post">Показать #  
<select name="limit" class="inputbox" size="1" onchange="document.location.href='http://test1.ru/index.php?option=com_virtuemart&page=shop.browse&category_id=11&keyword=&manufacturer_id=0&Itemid=34&orderby=product_sku&limit=' + this.options[selectedIndex].value + '&limitstart=0';">
	<option value="5">5</option>
	<option value="10">10</option>
	<option value="15">15</option>
	<option value="20">20</option>
	<option value="25">25</option>
	<option value="30">30</option>
	<option value="50" selected="selected">50</option>
</select>
<noscript><input class="button" type="submit" value="Отправить" /></noscript></form>Всего 1 - 7 из 7</div>

Я сделал так:

#pagenation form {position: absolute;}

После этого форма пропадает. Далее я пытаюсь указать координаты для ее положения при помощи top, right, left... бесполезно, она не появляется.

Попробовал комменты убрать - ничего не меняется. А разве, комментарии могут влиять на верстку?

Мне кажется, что ключ для понимание проблемы - "пропадание" формы при position: relative. По идее она должна визуально остаться на месте, ее место в потоке визуально изменяться не должно. Но как только она выпадает из потока (указание позиции relative) - она пропадает (куда-то уплывает), хотя не должна. И делает это только в 6 Эксплорере. Т.е. в этом браузере на эту форму действует какой-то параметр, заставляя ее "уплывать" за пределы окна браузера, при этом не расширяя само окно - за пределы body, как при отрицательном margin'e.

Я пробовал играть с отрицательными и положительными значениями отступов для этой формы, чтобы только нащупать ее местонахождение - не получилось, метод тыка не прокатывает =)

Но это только мои догадки, может все и не так.

maddogrts · January 5, 2008

да в ие очень много хаков как раз с комментариями поэтому может так получиться.

N-Mak · January 5, 2008

Есть замечательная книжка, называется "Мастерская CSS", автор Энди Бадд. Там подробно описываются не только баги разных браузеров, но и причины по которым они отображуают код не так как другие. Там я нашел такой абзац:

Абсолютное позиционирование в относительно позиционированном родительском элементе прекрасно работает в большинстве современных браузеров, однако 5,5 и 6 Эксплореры содержат досадную ошибку, нарушающую позиционирование. Если абсолютно позиционировать контейнер относительно правого или нижнего края родительского позиционированного контейнера, то нужно убедиться в том, что для родительского контейнера явно заданны размеры. В противном случае 5 и 6 Ослики ошибочно выполнят позиционирование относительно страницы, а не родительского контейнера.

Это оказалось корнем всех проблем.

Azadi · January 6, 2008

Можно попробовать поиграть с z-index, если совет N-Mak'а вам не подойдет.

А книжка Бадда неплохая, только перевод местами ужасный.

Sanguis · January 14, 2008

у меня возникла похожая проблема

есть слой который должен появляться поверх контента

у контента относительное позиционирование, у слоя - абсолютное. родительскому слою задана ширина в %. высоту задать невозможно.

в опере и огнелисе - все на месте, в ие - слой не видно. причем если всем дивам включить бордер, то в ие этот слой появляется! и он на нужном месте! пробовала делать бордер только для этого слоя - не помогло. z-index не помогает тоже.

и еще: в опере из-за абсолютного позиционирования этого слоя появляется горизонтальная полоса прокрутки. как ее убрать?

если надо код выложу, но думаю суть и так понятна

помогите плиз решить эту проблему

Sanguis · January 15, 2008

дополнение: поставила себе вчера еще и 7 осла, в нем везде появляется горизонтальная прокрутка! решается эта проблема только если для body задать ширину 97%. может можно как-нить по-другому?

и еще в 6 осле слой таки видно, но только на больших разрешениях (1024*1280 например), а вот на 768*1024 слоя так и нету.....

и в опере при абсолютном позиционировании ЛЮБОГО элемента появляется горизонтальная прокрутка.....

Sanguis · January 15, 2008

на всякий случай все-таки выкладываю код:

хтмл:

<div class="middle">
 <div class="left">
 <div class="iwantcat">
 <div class="iwantimg">
 <img src="img/image.jpg" height="130" width="165" alt="" />
 </div>
 <div class="iwanttext">
 <h3>Я хочу жить в Испании,</h3> потому что в этой стране очень мягкий климат и 300 дней в году светит солнце. Самый высокий уровень жизни в Евросоюзе.


 <span>Узнать больше</span><span class="about"><a href="">об Испании</a></span>
 </div>
 </div>

 <div class="benefits">
 <span><a href="">Услуги компании:</a></span>
 <ul>
 <li>Поиск и подбор объектов гостиничного бизнеса, наиболее полно удовлетворяющих целям и потребностям инвестора</li>
 <li>Анализ жизнеспособности проекта, включающий в себя коммерческий и маркетинговый обзор, экономический и финансовый анализ бизнеса</li>
 <li>Оценка инвестиционной привлекательности объекта, расчет денежных потоков и основных инвестиционных показателей проекта</li>
 <li>Ревизия существующей концепции бизнеса и разработка соответствующих альтернатив и рекомендаций.</li>
 <li>Комплексная инспекция приобретаемого объекта, due diligence и аудит предприятия</li>
 <li>Выбор оптимальной схемы финансирования сделки; подготовка необходимого пакета документов для получения банковского кредита</li>
 <li>Полное юридическое сопровождение сделки</li>
 <li>Услуги, связанные с успешным ведением гостиничного бизнеса в Европе, включая содействие в получении необходимых разрешений и лицензий, внедрение специализированных информационных систем, маркетинг и продвижение предприятия, подбор управляющей компании, и т.д.</li>
 </ul>
 </div>
 <div class="choosetype">
 <div>
 <h2>Выберите тип недвижимости</h2>
 <a href=""><img src="img/close.gif" height="13" width="14" alt="Закрыть" /></a>


 <span><a href="">Любая</a></span>


 </div>
 <div class="choose">
 <div class="typeleft">
 <form action=""><input type="checkbox" checked="checked" />Жилая
	   недвижимость</form>

 <form action=""><input type="checkbox" checked="checked" disabled="disabled" /><span class="grey">Таунхаусы</span></form>
 <form action=""><input type="checkbox" checked="checked" disabled="disabled" /><span class="grey">Квартиры</span></form>
 <form action=""><input type="checkbox" checked="checked" disabled="disabled" /><span class="grey">Виллы</span></form>
 </div>
 <div class="typemiddle">
 <form action=""><input type="checkbox" checked="checked" />Коммерческая
	   недвижимость</form>

 <form action=""><input type="checkbox" /><span class="pink">Офисы</span></form>
 <form action=""><input type="checkbox" /><span class="pink">Рестораны</span></form>
 <form action=""><input type="checkbox" checked="checked" /><span class="pink">Бары</span></form> 
 </div>
 <div class="typeright"> 
 <form action="">
 <input type="checkbox" checked="checked" />Земельные
	   участки








 </form>
 </div>
 </div>
 <form action="">
 <input class="button" type="image" src="img/ok.gif" />
 </form>
 </div>
 </div>

ксс:

.middle { width: 100%; float: left; padding-left:30px; margin-top:30px; margin-bottom:30px;}
.left { width: 65%; float: left; top:0px; left:0px; position:relative;}
.choosetype{ background-color:#fff6d4; width:70%; padding:15px; display:block; position: absolute; left:33%; top:0px; z-index:1;}
.choosetype h2{ font-size:18px; color:#000000; font-weight:normal; padding:0px; margin:0px; float:left; line-height:100%;}
.choosetype img{ float:right;}
.choosetype span{float:none;}
.choosetype a{ color:#ad2338; font-size:16px;}
.choosetype input.button{ padding-top:10px;}
.choose span{ top:0px; position:relative; padding:0; margin:0;}
.choose form{ margin:0; padding:0; padding-bottom:10px;}
.choose input{ margin-right:8px;}
.choose span.grey{ font-size:14px; color:#666666;}
.choose span.pink{ font-size:14px; color:#ad2338;}
.typeleft{ width:35%; float:left;}
.typemiddle{width:30%; float:left;}
.typeright{width:30%; float:right;}

yopopt · January 15, 2008

Уберите свойство padding-left:30px; из класса .middle и добавьте его в .left

Sanguis · January 15, 2008

yopopt, спасибо, горизонтальная прокрутка ушла, вроде даже везде !!!!!

а вот в 6 осле слоя так и не видно на маленьком разрешении.......даже не то чтобы он где-то кусочком торчал - его просто нету!!! а это важная часть поисковой формы...... там же есть еще один почти идентичный слой (там выбор локализации типа), у них обоих будет меняться параметр display с none на block....

Sanguis · January 15, 2008

так, кажись слой стал появляться.... только я так не поняла почему =)

Sign In

"Пропажа" слоя в 6 эксплорере.

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information