странная ошибка IE?

Question

Я потратил слишком много времени, пытаясь заставить это работать на IE 7. Он работает на ff, и единственные ошибки, возникающие на валидаторе, это отсутствие alt-тегов для изображений (9 ошибок).

Весь сайт работает за исключением этой части, и поэтому мне интересно, есть ли странная ошибка с плавающей точкой, о которой я не знаю.

У меня есть div с изображением внутри. Под изображением у меня есть 3 div, которые содержат изображения. Существует небольшой разрыв между изображением в верхней части div и div под ним

Вот мой код:

<div class="header_banner">
                <img src="html_images/banner.jpg" />
<div class="header_left"></div>
<div class="header_main" id="header_menu">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="studio.php" rel="show_studio">Studio</a></li>
        <li><a href="school.php" rel="show_school">School</a></li>
        <li><a href="#" rel="show_events">Events</a></li>
        <li><a href="#">Shop</a></li>

    </ul>

</div>
<div class="header_right"></div>
</div>

Вот CSS:

.header_banner
{
float:left;
width:531px;
}

.header_left
{
float:left;
background-color:#003399;
background-image:url('../html_images/header_left.jpg');
background-repeat:no-repeat;
background-position:48px;
width:55px;
height:33px;
}

.header_right
{
float:left;
background-image:url('../html_images/header_right.jpg');
width:7px;
height:33px;
}

.header_main
{
float:left;
background-image:url('../html_images/header_main.jpg');
background-repeat:repeat-x;
width:426px;
height:33px;
}

Я бы не удивился, если бы я что-то упустил, но сейчас я прочитал это 3 раза. Есть идеи? (Я установил цвет фона, чтобы точно определить, где разрыв)

Спасибо

Answer 1

Я бы рекомендовал использовать таблицу стилей сброса (или вставить стили сброса в верхнюю часть таблицы стилей). Это может помочь вам избежать всевозможных проблем, подобных той, которую вы видите.

Answer 2

Вы пытались добавить style="display:block;" к элементу img?

Я также помню, что читал, что пробел после тега может вызвать проблемы. Попробуйте настроить разметку, удалив пробел:

<div class="header_banner"><img src="html_images/banner.jpg" /><div class="header_left"></div> etc..

Answer 3

Ты прав; это, вероятно, ошибка Explorer. Вот еще немного информации: http://www.positioniseverything.net/explorer/floatIndent.html

Кажется, проблема в том, как IE обрабатывает поля. Посмотрите, поможет ли определение маржи (в данном случае 0px).