[Milestone]

Здравствуйте!

Пытаюсь сделать своими силами сайт для компании. Возникла проблема с тем, что сайт, который нормально отображения в ff, safari и chrome, как-то безумно дико повел себя в ИЕ. Не могу понять в чем проблема и какие именно параметры CSS различаются. То есть что нужно поменять?

Сайт сверстан div-ами. Вот код HTML:

<div id="header">
	<div class="main">
		<div class="container">
			<div class="left">
				<div align="center"><a href="/"><img src="img/logo.gif" alt=""></a></div>
			</div>
		</div>
		<div class="right">
   тут картинки и буквы
		</div>
		<div class="clear"></div>
	</div>
</div>

Вот CSS-стиль для него:

.left{
	float:left;
	}
.right{
	float:right;
	}
.clear{
	clear:both;
	}
#header {
	background:url(../img/bg.gif) top repeat-x;
	}
#header .left {
	padding:28px 0 33px 0;
	}
#header .right {
	padding-right:4px;
	}
.container {
	width:100%;
	}
.main {
	width:784px;
	margin:0 auto;
	text-align:left;
	}

Недоделанную версию сайта в действии можно посмотреть здесь: www.ibwsw.com

Проблема заключается в том, что блок, который должен находиться справа (right) почему-то в ИЕ сползает вниз.

И еще почему-то снизу полоска, которая должна быть высотой в 1px становиться гораздо шире в ИЕ.

Заранее спасибо за помощь!

Добавлено через 1 час 24 минуты

Да, забыл сказать проблема возникает в ИЕ6. В 7 или 8ом не пробовал за отсутствием оного)

[Асмодиан]

А теперь почитайте внимательно свой код.

<div id="header">
  <div class="main">
    <div class="container">...</div>
    <div class="right">...</div>
    <div class="clear"></div>
  </div>
</div>

У вас right идёт на одном уровне с container, и после container
а container у вас width:100%;
В случае с FF, Opera и пр. если внутри элемента находятся только подэлементы float != none, а сам элемент не float, то он слипается - то есть в данном случае имеет нулевую высоту, у IE же это сделанно по-другому, там важно неявное свойство hasLayout, которое не даёт слипаться container-у. Чтобы убрать hasLayout, вы можете убрать например из css для container-а строку width:100%. И у вас всё станет идентично остальным браузерам.
Но правильнее логически было-бы перенести right внутрь container-а., тогда всё тоже станет ОК.

<div id="header">
  <div class="main">
    <div class="container">
      <div class="left">
        <div align="center"><a href="/"><img src="img/logo.gif" alt=""></a></div>
      </div>
      <div class="right">
        тут картинки и буквы
      </div>
      <div class="clear"></div>
    </div>
  </div>
</div>

[Milestone]

Огромное спасибо за помощь!