Проблемы CSS / HTML IE 7

Question

У меня проблемы с получением чего-то работающего в IE 7, прекрасно работает во всех других браузерах, но если вы посмотрите на http://jamessuske.com/thornwood2/ в IE 7, вы заметите два пробела между topCotent и contentArea и другой разрыв между contentArea и contentBottom.

Не знаю, как это исправить.

HTML-код

<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->

<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->

<div class="contentArea">

</div><!--contentArea-->

<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->

<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->

CSS-код

.topContent{
width:1009px;
}

.leftContent{
float:left;
}

.contentArea{
background:#FFF;
width:912px;
min-height:494px;
float:left;
}

.rightContent{
float:right;
}

.bottomContent{
width:1009px;
}

Answer 1

Элемент <img> является встроенным элементом. Это означает, что у него есть свойство vertical-align, которое по умолчанию установлено на bottom. По какой-то причине это вызывает проблемы, когда у вас есть <img>, содержащийся в элементе уровня блока (например, <div>).

Вот откуда берутся ваши пробелы: по какой-то причине IE добавляет немного места внизу элементов <div>, содержащих эти изображения. (Он также делает это с вашим .bottomContent элементом; это просто сложнее заметить / не так уж сложно).

Исправление так же просто, как это:

.topContent img, .leftContent img, .contentArea img, .rightContent img {
    display:block
}

(Если по какой-либо причине вам не нравится / не может объявить display:block, вы можете вместо этого использовать vertical-align:top.)

Answer 2

Добавьте высоту к классам, как показано ниже, что решит проблему с IE7

.topContent{
  width:1009px;
  *height:37px;
}

.leftContent{
  float:left;
  *height:494px;
}


.rightContent{
  float:right;
  *height:494px;
}