CodeInside
@CodeInside

Как убрать отступы в ячейках без js (табличная вёрстка)?

Откуда в каждой ячейке берётся отступ от изображения снизу и справа (белые полосы между изображениями)?
(не обращайте внимания на то, что неправильно использую HTML5-теги и CSS3-костыли: суть задания в табличной вёрстке)
b3cc6e77c69d4f5a96fc802900d78d76.png
<!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>&nbsp;</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 вообще совершенно другие вещи происходят.
  • Вопрос задан
  • 984 просмотра
Пригласить эксперта
Ответы на вопрос 2
Henryh
@Henryh
Веб-программист
Думаю, дело в доктайпе, html5 не предназначен для такой вёрстки. Попробуйте использовать доктайп того времени:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


и валидатор ругаться перестанет
Ответ написан
@byms
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы