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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем pivkos, 27 июл 2009.

  1. pivkos

    pivkos Гость

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

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

    Вот код:
    Код (Text):
    <!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; }, то рамочка отображается так, как нужно, но превьюшки стоят вертикально, а нужно, чтобы они стояли горизонтально.

    Пожалуйста, подскажите, как исправить вёрстку и сделать, чтобы всё это красиво работало во всех браузерах?
    Заранее огромное спасибо!
     
  2. nws

    nws Гость

Загрузка...

Поделиться этой страницей