Откуда в каждой ячейке берётся отступ от изображения снизу и справа (белые полосы между изображениями)?
(не обращайте внимания на то, что неправильно использую HTML5-теги и CSS3-костыли: суть задания в табличной вёрстке)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Netservice</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="wrapper">
<table> <!-- border="0" cellpadding="0" cellspacing="0" -->
<tr>
<td>
<table>
<tr>
<td colspan="2"><img src="images/left1.jpg" alt="Not loaded left1.jpg"></td>
<td><img src="images/right1.jpg" alt="Not loaded right1.jpg"></td>
</tr>
<tr>
<td><img src="images/left2.jpg" alt="Not loaded left2.jpg"></td>
<td> </td>
<td><img src="images/right2.jpg" alt="Not loaded right2.jpg"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><img src="images/left3.jpg" alt="Not loaded left3.jpg"></td>
<td id="content" rowspan="2">
<table>
<tr>
<td>
<table>
<tr>
<td class="limited-width" rowspan="2">
<header>
<h3>Решение бизнес-задач</h3>
<p class="right-align italic">"<b>Promotion</b> (сущ.) - 1) производство в чин 2) содействие 3) продвижение (по службе и т. п.) 4) шк. перевод в следующий класс" ... Англо-русский словарь </p>
</header>
<p>
Компания "НетСервис.ру" предлагает комплекс услуг по продвижению (раскрутке) веб-сайта в инетрнете с целью решения следующих бизнес-задач:
</p>
<section>
<article>
<img src="images/small1.gif" alt="создание виртуального офиса">
<p><strong>создание виртуального офиса</strong> - у вас есть уникальная продукция, технология, услуга? - дайте знать о них всему миру, разместив информацию на своем сайте, ведь объем информации на нем практически неограничен; плюс иллюстрации, анимация, видео и звук;</p>
</article>
<article>
<img src="images/small2.gif" alt="формирование положительного имиджа">
<p><strong>формирование положительного имиджа</strong>- создавая веб-сайт, вы получаете реальные преимущества, расчитанные на перспективу, т.к. количество российских пользователей Интернета растет на 4 000 чел. в день, и каждый день в Интернете регистрируется 1 500 новых российских сайтов;</p>
</article>
<article>
<img src="images/small3.gif" alt="стимулирование спроса на товары/услуги, расширение клиенской базы">
<p><strong>стимулирование спроса на товары/услуги, расширение клиенской базы </strong>- веб-сайт обеспечит вам новых клиентов и партнеров, а Вашему бизнесу - новый импульс развития, ведь 10-15 человек в месяц (1% от зашедших на сайт) - ваши потенциальные клиенты, а грамотно спроектированный сайт окупает вложенные инвестиции уже за 3 месяца;</p>
</article>
</section>
</td>
<td class="right-sidebar">
<h3>Позиционирование веб-сайта</h3>
<article>
<img src="images/small4.gif" alt="small4">
<p>В результате правильного позиционирования в поисковых системах и каталогах сайт приобретает стабильную популярность среди пользователей, собирает определенную целевую аудиторию, а владельцы интернет-ресурсов получают первую отдачу...</p>
<a href="">подробнее</a>
</article>
<h3>Независимая статистика</h3>
<article>
<img src="images/small5.gif" alt="small5">
<p>Специалисты компании "НетСервис.ру" предлагают своим клиентам разработку индивидуальных систем статистики посещаемости веб-сайта, разработанных индивидуально под ваш интернет-проект... </p>
<a href="">подробнее</a>
</article>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<ul>
<li id="selected">Решение бизнес-задач</li>
<li>Веб-дизайн</li>
<li>Наполнение контентом</li>
<li>Веб-программирование</li>
<li>Техническая поддержка</li>
<li>Интернет-маркетинг</li>
</ul>
</td>
</tr>
</table>
</tr>
</table>
</div>
</body>
</html>
table {
border-spacing: 0;
border-collapse: collapse;
border: none;
margin: 0;
vertical-align:top;
}
#wrapper {
margin: 0;
padding: 0;
width: 100%;
}
#content {
outline: 2px solid #676f67;
padding: 0;
padding-top: 0;
}
#content p {
padding: 2em;
padding-bottom: 0.75em;
}
#selected {
color: #637363;
text-decoration: underline;
-moz-text-decoration-color: #637363;
text-decoration-color: #637363;
}
.right-align {
text-align: right;
}
.italic {
font-style: italic;
}
img {
margin: 0;
padding: 0;
height: 100%;
width: inherit;
}
td {
border: none;
border-spacing: 0;
padding: 0px;
/*height: 100%;*/
vertical-align: top;
}
ul {
list-style-image: url(images/menu.gif);
font-weight: bold;
font-size: 0.9em;
text-decoration: underline;
}
li:hover {
color: #8c1200;
text-decoration: underline;
-moz-text-decoration-color: #8c1200;
text-decoration-color: #8c1200;
cursor: pointer;
list-style-image: url(images/arrow.gif);
}
#content h3 {
border: 2px solid #676f67;
margin: 1.5em;
color: #8a0b01;
text-align: center;
}
section img {
border: 1px solid black;
display: block;
float: left;
margin: 2em;
margin-right: 0.75em;
margin-bottom: 0.15em;
}
.limited-width {
width: 70%;
max-width: 70%;
}
section article {
clear: both;
}
a {
color: #394231;
font-size: 1.25em;
}
a:before {
content: url(images/arrow.gif);
}
.right-sidebar img {
display: block;
float: left;
margin: 0.5em;
}
.right-sidebar p {
margin: 0;
padding: 0;
}
Если установить td height: 100%, то например в Chrome верхние изображения нормально сливаются, а нижние очень сильно растягиваются. При этом в FireFox вообще совершенно другие вещи происходят.
Простой
Простой