Неправильное позиционирование в IE6.0

AlexMak · January 14, 2009

<html>
<head>
      <title>Lifestyle</title>
 <style type="text/css" media="all">
	body, html {height:100%; width:100%;  margin:0px;  padding:0px}
	a{text-decoration:none;}
 </style>
<script>
var potkat1_visible=false;
function show_potkat1(){
	if (potkat1_visible==false){
		document.getElementById('potkat1').style.display='inline-block';	potkat1_visible=true;
	} else {document.getElementById('potkat1').style.display='none'; potkat1_visible=false;}
}
function hide_potkat1(){
	document.getElementById('potkat1').style.display='none'; potkat1_visible=false;
	}
</script>
</head>
<body>

<!-- Таблица главная !-->
<table align="left" width="90%" border="0" cellspacing="20" style="position:relative; top:140px; left:10%;">  
    <td width="15%" class="faq_text" style="white-space:nowrap; vertical-align:top;">
    	<div class="lifestyle_text">
        22.12.2008<br>
        История создания.
        </div>
    </td>
    <td>
    	<div style="position:relative; left:0%;">
        	<a  name="news1"></a><div class="lifestyle_title" onClick="show_potkat1();" style="cursor:pointer;">Комната в коммунальной квартире, все поправимо.</div>
			<br><div class="lifestyle_text" style="width:70%;">
        	  Многие думают, что препятствием для дизайна помещения может явиться размер самого помещения: будь-то высота потолков или стен, площадь комнаты или бабушкин шкаф во всю комнату. Нет, препятствие в стереотипах. 
Вот для примера дизайн небольшой комнаты в коммунальной квартире площадью 15 квадратных метров, из которой заказчик пожелал сделать комфортабельную квартиру с гостиной, спальней и кухней. Ну что ж, поехали!
Работа началось, естественно, с определения планировки. Нашей главной целью явилось совмещение максимальной функциональности и удобства на минимальной площади.
			</div>
            <div onClick="show_potkat1();" style="position:absolute; left:-12%; cursor:pointer;">Открыть</div>
            <div class="faq_text" id="potkat1" style="display:none; width:70%;">
            <br><img src="lifestyle/kommunalka/kroom1.gif"><br><br>
            Основной идеей перепланировки явилось разделение комнаты на 3 зоны:
спальная зона (или зона отдыха), кухонная зона, входная зона.
С этой целью комната делится перегородкой, которая одновременно играет роль TV-тумбы с поворотным механизмом.
Она собой представляет каркас с хромированными вставками, в котором находится вращающаяся плазменная панель и светодиодные светильники, которые в программном режиме могут менять свой цвет. При переходе из одной зоны в другую легким движением или с помощью пульта дистанционного управления можно разворачивать телевизор нужным вам образом, а также включать/выключать подсветку панелей. Не правда ли удобно, а самое главное – функционально.
			<br><br><img src="lifestyle/kommunalka/kroom2.gif"><br><br>
            Подбор мебели осуществлялся по формуле: минимум пространства, максимум функциональности. Поэтому подъёмная кровать - трансформер отлично вписалась в интерьер. Бескаркасные кресла-пуфики являются незаменимой и неотъемлемой частью как акцентирующие элементы. К тому же их можно без особого труда перемещать  по всей комнате. Для кухни был разработан эксклюзивный стол - трансформер, встраиваемый в стенку.
            <br><br><img src="lifestyle/kommunalka/kroom3.gif"><br><br>
            Разберем теперь, что собой представляет потолок. Над кухонной и входной частью потолок был оставлен без изменения, разве что были добавлены пара светильников. А вот в зоне отдыха потолок претерпел значительные изменения. Конечно же не хотелось сжимать пространство свисающими люстрами, светильниками и. т.п., поэтому предпочтение было отдано закарнизному освещению и натяжному потолку ”звездное небо”.
            <br><br><img src="lifestyle/kommunalka/kroom4.gif"><br><br>
            Результат - современная, удобная комната, которая, по желанию хозяина, может превращаться в спальню, гостиную и кухню, и в которую не стыдно пригласить гостей  :)
            <br><br><img src="lifestyle/kommunalka/kroom5.jpg"><br><br>
            <img src="lifestyle/close1.gif" onClick="hide_potkat1();" style="position:absolute; left:-12%; cursor:pointer;">
            </div>
        </div>
    </td>
  </tr>
</table>

<div class="podvalfon" style="position:relative; top:180px; left:0%; border: none; width: 100%; height: 54px; display:inline-block;">
  <div class="info_text" align="left" style="color:#FFFFFF; position:absolute; top:0px; left:2.5%;">
  	Санкт-Петербург, пр. Пискаревский, д.63<br>
	+7 (812) 309-25-92 <br>
	<a href="mailto:info@comfart.ru?subject=Письмо" title="Письмо с сайта" class="mail" style="border-bottom:solid 1px; text-decoration:none; cursor:pointer;"><div style="border-bottom:solid 1px; width:80px;">info@comfart.ru</div></a>
  </div>
</div>
</body>
</html>

Почему-то неправильно позиционируется последний див(адрес и телефон), по идее он должен быть отсчитан от таблицы вниз, но он смещается вправо. Из-за этого не получается правильно раскрыть блок. В чем может быть проблема? Firefox воспринимает все правильно, но с ie возникает этот трабл.

Edited January 14, 2009 by AlexMak

Колос · January 14, 2009

А ты сделай чтобы у слоя

<div style="position:relative; top:180px; left:0%; border: 0px none #000000; width: 100%; height: 54px;">

граница стала видимой.

И сравни как это будет выглядеть в ИЕ и в Мазиле.

По-моему всё станет ясно.

AlexMak · January 14, 2009

То, что у слоя неправильно ширина определяется? Ну в этом и трабл, что он непонятно к чему ссылается через relative. Поэтому и задаю вопрос.

Searcher · January 14, 2009

Добавьте DOCTYPE

Ужасный код... А в IE6 полный бардак!

<a href="mailto:info@comfart.ru?subject=Письмо" title="Письмо с сайта" class="mail" style="border-bottom:solid 1px; text-decoration:none; cursor:pointer;"><div style="border-bottom:solid 1px; width:80px;">info@comfart.ru</div></a>

Что это за странная конструкция? Не стоит вставлять блочный элемент во встроенный, все стили из <div> применимы в <a>, или поменяйте местами, вложите <a> в <div>, и зачем ограничивать ширину этого элемента?

<div class="podvalfon" style="position:relative; top:180px; left:0%; border: 1 solid black; width: 100%; height: 54px; display:inline-block;">

Тоже непонятно зачем inline-block, если width: 100%... В IE эта конструкция вообще отображается справа от контента и создает горизонтальную прокрутку.

<div class="info_text" align="left" style="color:#FFFFFF; position:absolute; top:0px; left:2.5%;">
Санкт-Петербург, пр. Пискаревский, д.63<br>

не из-за этого ли left:2.5% появляется отступ слева?

Edited January 14, 2009 by Searcher

Колос · January 14, 2009

Хм...

Ты задаешь вопрос. Я тебе называю причину, почему это так получается. Ты говоришь, что причину знаешь. Значит надо было задавать вопрос про причину, а не следствие. Я прав? Или должен сам догадываться до причин почему у тебя не работает?

Как выглядит в ИЕ и мазиле, если отключить позиционирование и у таблицы и у блока, видел? Суть вопроса как раз в этом.

Можно добавить доктайп в самом начале страницы, например такой

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

тогда у слоя в ИЕ ширина будет 100%

Если ещё обернуть таблицу в <div style="zoom:1">, то в ИЕ слой будет располагаться прямо под таблицей, а не справа.

Если если этому же div добавить ещё display:table, то в мазиле таблица будет его растягивать, а не вылезать. То есть поведение в мазиле станет как в ИЕ.

То есть, теперь поведение в ИЕ и в Мазиле станет одинаковым. Нужно теперь только отпозиционировать слой немного по другому.

AlexMak · January 14, 2009

2 Searcher

Про все эти замечания в курсе и уже исправил. Просто не буду же я выкидывать страницу полностью, а тестовые страницы много чем нагромождены. Но спасибо за советы.

2 Колос

А вот за последние советы огромное спасибо, просто сайты пишу недавно и таких тонкостей еще не знаю. Все помогло и отлично работает)

Sign In

Неправильное позиционирование в IE6.0

Question

AlexMak

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Колос

Link to comment

Share on other sites

AlexMak

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Колос

Link to comment

Share on other sites

AlexMak

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information