Разъяренный разрыв: как избавиться от разрыва между IMG и окружающим контентом

Question

Пытались часами и, похоже, выяснили, как устранить этот «белый пробел», показанный здесь: http://dl.dropbox.com/u/7117445/temp/gap.jpg

рассматриваемый веб-сайт: http://www.jwschultzconstruction.com/staging/index.php

Пожалуйста, помогите!

Отредактированный вопрос после ответа:

Как избавиться от разрыва между IMG и окружающим контентом?(ответ ниже)

похож на этот вопрос: Строгий HTML и CSS: Как мне закрыть пробел?

Answer 1

Сделать отображение заголовка изображения: блок

Единственный блок стилей, влияющий на это в настоящее время:

table tr td a img {
    [...]
}

Таким образом, вы можете добавить:

table tr td a img {
    [...]
    display:block;
}

Это, или добавьте класс к изображению как:

<img src="images/banner2.jpg" class="headerImage">

А затем добавьте новый блок стиля:

.headerImage { display:block; }

Answer 2

Первое, что я хотел бы сделать, это установить border = 0 для изображения, а затем установить стиль максимальной высоты для td, который содержит изображение.Это также может быть в вашем CSS на 4-м элементе (таблица tr td a img) ... если у вас нет границы, избавьтесь от этих 3 стилей и добавьте border:none;

Вы пробовали?используя Firefox добавить под названием firebug?Это имеет огромное значение.

Answer 3

попробуйте добавить это:

 table tr td a img {
      margin-bottom:-3px;
 }

Может потребоваться дополнительная очистка из-за разметки таблицы.

Answer 4

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