SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast Insane_Edna's Avatar
    Join Date
    Oct 2003
    Location
    Alberta, Canada
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gallery Rollover Issue

    I am trying to have a CSS image rollover that shows a larger image when the thumbnail. I found a good cross browser css demo at dynamic drive that I thought would work in my situation.
    I have a main content area that has an internal border area that stores all content. I have positioned an image and to the left of that my text. In Firefox and Opera everything performs as expected in regards to styling and all elements being contained within the wrapper.
    In IE 6 & 7 I have problems caused by the relative positioning in the thumbnail class. What happens is the images float all over the screen and when you rollover the thumbnail it causes the large image to appear outside of the wrapper area.
    If I remove the relative positioning in the thumbnail class all browsers then show the images and text as expected but when I rollover the image the larger image now appears outside the wrapper area.
    I don't have anything live yet an so can only show the code and the lipsum text I am using as it hasn't been finalized yet.
    Can someone help me out with this issue as it is driving me insane. Here is the code that I am using:

    Stylesheet

    Code:
    #main {
      width: 760px;
      height: 413px;
      margin: 5px auto;
      border: 2px solid #406480;
      background-color: #cfdce6;
      }
      #wrapper {
      text-align:left;
      margin:0 auto;
      width:700px;
      height:330px;
      border:1px solid #507ea1;
      overflow: auto;
      }
    
    /* Image Enlarge */
    
    .thumbnail{
    position:relative;
    z-index: 0;
    }
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    padding: 2px;
    left: -1000px;
    background-color: #426581;
    border: 2px solid #000000;
    visibility: hidden;
    }
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    positon: relative;
    margin-top: 2px;
    left: 2px; /*position where enlarged image should offset horizontally */
    }
    /*End of image enlargement styling */
    
    /* Image Thumb And Text Positioning */
    
    .thumb-position {
      margin-left: 10px;
      margint-top: 10px;
      }
      .text-position {
      width: 450px;
      margin-left: 175px;
      margin-top: -125px;
      }
    HTML used on the page

    Code:
    <div id="main">
         <!--#include file="navigation.html" --><br/>
              <div id="wrapper"><h1>Past Projects</h1>
                   <a class="thumbnail" href="#"><img class="thumb-position" src="images/projects/image-small.jpg" alt="Alt" /><span><img src="images/projects/image-large.jpg" alt="Alt" /></span></a> <div class="text-position"><a href="#">Some Link</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vitae nulla. Pellentesque sagittis. Duis nec ipsum. Suspendisse placerat. Sed iaculis felis nec quam. Suspendisse pretium, sem sollicitudin vehicula ornare, massa lorem condimentum dolor, vitae feugiat arcu massa ut libero. Suspendisse tincidunt. Nam ac augue sed mauris iaculis dignissim. Maecenas fermentum nulla et sapien. Pellentesque malesuada scelerisque metus. In leo. Aliquam luctus justo a magna. Suspendisse commodo. <br/>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vitae nulla. Pellentesque sagittis. Duis nec ipsum. Suspendisse placerat. Sed iaculis felis nec quam. Suspendisse pretium, sem sollicitudin vehicula ornare, massa lorem condimentum dolor, vitae feugiat arcu massa ut libero. </div><br/>
    
    <a class="thumbnail" href="#"><img class="thumb-position" src="images/projects/image-small.jpg" alt="Alt" /><span><img src="images/projects/image-large.jpg" alt="Alt" /></span></a> <div class="text-position"><a href="#">Some Link</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vitae nulla. Pellentesque sagittis. Duis nec ipsum. Suspendisse placerat. Sed iaculis felis nec quam. Suspendisse pretium, sem sollicitudin vehicula ornare, massa lorem condimentum dolor, vitae feugiat arcu massa ut libero. Suspendisse tincidunt. Nam ac augue sed mauris iaculis dignissim. Maecenas fermentum nulla et sapien. Pellentesque malesuada scelerisque metus. In leo. Aliquam luctus justo a magna. Suspendisse commodo. <br/>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vitae nulla. Pellentesque sagittis. Duis nec ipsum. Suspendisse placerat. Sed iaculis felis nec quam. Suspendisse pretium, sem sollicitudin vehicula ornare, massa lorem condimentum dolor, vitae feugiat arcu massa ut libero. </div><br/>
    </div>
              </div>
    Thanks for any help anyone can provide.

  2. #2
    SitePoint Enthusiast Insane_Edna's Avatar
    Join Date
    Oct 2003
    Location
    Alberta, Canada
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a link to the site showing the problem I am having. In Firefox and Opera everything is contained within the Wrapper. But in IE6 and IE7 the images don't position properly within the wrapper and the expanded image falls outside the wrapper area as well.

    http://www.chadegeland.com/gallery/index.shtml

    Thanks in advance for any help anyone can provide me on this issue.


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
  •