Вёрстка превьюшек

pivkos · July 27, 2009

Здравствуйте!

Верстаю свою галерейку, застопорился на выводе превьюшек.

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<style type="text/css">
		#gallery .photo_div{ display: inline; }
		.photo_div { 
			width:82px;
			height:97px;
			margin-left:5px;margin-right:5px;margin-bottom:10px;
			border:1px solid #d8dcea; 
			text-align: center; font: verdana, arial, sans-serif;
		}
		.photo_div img {
			border: 5px solid #fff;
			border-width: 5px 5px 20px;
		}
		.photo_div a:hover img {
			border: 5px solid #3e3e3e;
			border-width: 5px 5px 20px;
			color: #fff;
		}
		.photo_div a:hover {
			color: #fff;
		}
	</style>	
	</head>
	<body>
		<div id="gallery">
			<div class="photo_div">
				<a href="g3314.jpg" title="Картинка">
					<img src="mini_g3314.jpg" width="72" height="72" alt="" />
				</a>
			</div>
			<div class="photo_div">
				<a href="g3314.jpg" title="Картинка">
					<img src="mini_g3314.jpg" width="72" height="72" alt="" />
				</a>
			</div>
		</div>	
	</body>
</html>

Вот тут можно посмотреть на страницу: пример

В ИЕ(я тестировал на ИЕ6, других под рукой нет) выскакивает пара лишних пикселей, которые я никак не могу убрать.

В ФФ рамочка целиком косячит, но если убрать #gallery .photo_div{ display: inline; }, то рамочка отображается так, как нужно, но превьюшки стоят вертикально, а нужно, чтобы они стояли горизонтально.

Пожалуйста, подскажите, как исправить вёрстку и сделать, чтобы всё это красиво работало во всех браузерах?

Заранее огромное спасибо!

Great Rash · July 29, 2009

Уберите инлайн у дивов - это изврат. Поставьте float: left; и будет вам счастье.

Sign In

Вёрстка превьюшек

Question

pivkos

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information