SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Question re CSS photo gallery

    Please have a look at the following page:

    http://www.timokleemann.com/index.php?page=photos

    Can you see the photo gallery I made? I made it entirely in CSS without any JavaScript and it works VERY WELL in most browsers.

    BUT... it doesn't seem to work in Internet Explorer...

    WHY!!??? I have spent hours today trying to fix this, but NOTHING!



    In the HTML each photo looks like this:

    <div class="photo">
    <a href="index.php?page=photo"><div id="thumb1"></div></a>
    </div>

    and so on...



    The CSS looks like this (watch out, it's a long one!):

    /********************* PHOTOS *********************/

    .photo {
    background: url(../images/drop_shadow.jpg) no-repeat;
    height: 100px;
    width: 100px;
    padding: 10px;
    margin: 0 10px 0 0;
    float: left;
    }

    a:link #thumb1,
    a:link #thumb2,
    a:link #thumb3,
    a:link #thumb4,
    a:link #thumb5,
    a:link #thumb6 {
    position: absolute;
    z-index: 98;
    height: 80px;
    width: 80px;
    margin: 0;
    padding: 0;
    }

    a:hover #thumb1,
    a:hover #thumb2,
    a:hover #thumb3,
    a:hover #thumb4,
    a:hover #thumb5,
    a:hover #thumb6 {
    position: absolute;
    z-index: 99;
    padding: 5px;
    background: center no-repeat white;
    border: 2px solid #f1f1f1;
    }

    a:link #thumb1 {
    background-image: url(../images/thmb_alstervilla.jpg);
    }
    a:hover #thumb1 {
    background-image: url(../images/img_alstervilla.jpg);
    height: 390px;
    width: 300px;
    }

    a:link #thumb2 {
    background-image: url(../images/thmb_beach.jpg);
    }
    a:hover #thumb2 {
    background-image: url(../images/img_beach.jpg);
    height: 300px;
    width: 390px;
    }

    a:link #thumb3 {
    background-image: url(../images/thmb_library.jpg);
    }
    a:hover #thumb3 {
    background-image: url(../images/img_library.jpg);
    height: 390px;
    width: 300px;
    }

    a:link #thumb4 {
    background-image: url(../images/thmb_cambridge.jpg);
    }
    a:hover #thumb4 {
    background-image: url(../images/img_cambridge.jpg);
    height: 390px;
    width: 300px;
    }

    a:link #thumb5 {
    background-image: url(../images/thmb_graduation.jpg);
    }
    a:hover #thumb5 {
    background-image: url(../images/img_graduation.jpg);
    height: 300px;
    width: 390px;
    }

    a:link #thumb6 {
    background-image: url(../images/thmb_facade.jpg);
    }
    a:hover #thumb6 {
    background-image: url(../images/img_facade.jpg);
    height: 390px;
    width: 300px;
    }



    Or check out http://www.timokleemann.com/css/timo.css

    (if you have time...)

    I really need some help here!!!

  2. #2
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I know, the CSS file really is ridiculously long, but there's no other way because some of the photos I have in my gallery are in horizontal format, while others are in vertical format. Each photo has to be referenced seperately due to this... Sorry...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •