Здравствуйте!
Верстаю свою галерейку, застопорился на выводе превьюшек.
Вот код:
Вот тут можно посмотреть на страницу:
В ИЕ(я тестировал на ИЕ6, других под рукой нет) выскакивает пара лишних пикселей, которые я никак не могу убрать.
В ФФ рамочка целиком косячит, но если убрать #gallery .photo_div{ display: inline; }, то рамочка отображается так, как нужно, но превьюшки стоят вертикально, а нужно, чтобы они стояли горизонтально.
Пожалуйста, подскажите, как исправить вёрстку и сделать, чтобы всё это красиво работало во всех браузерах?
Заранее огромное спасибо!
Верстаю свою галерейку, застопорился на выводе превьюшек.
Вот код:
Код:
<!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; }, то рамочка отображается так, как нужно, но превьюшки стоят вертикально, а нужно, чтобы они стояли горизонтально.
Пожалуйста, подскажите, как исправить вёрстку и сделать, чтобы всё это красиво работало во всех браузерах?
Заранее огромное спасибо!