WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > CSS Image Gallery Problem

Reply
  Thread Tools Display Modes
Old 19th February 07, 03:39 PM   #1
Insane_Edna
WLC Member
 
Join Date: Feb 2007
Posts: 2
Default CSS Image Gallery Problem

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.
Can someone help me out with this issue as it is driving me insane. Here is the code that I am using:

The CSS:

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;
  }
The HTML:

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 that you can give.
Insane_Edna is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering Problem Due to Image sharingsunshine CSS 2 3rd August 07 11:51 PM
Float image thumbnail gallery - problem with Safari joannakt Browser Compatibility 0 1st July 07 10:34 PM
Background height problem in FireFox but work in IE EthanCote Browser Compatibility 3 16th March 07 07:34 AM
List problem... willsmith727 CSS 1 1st September 06 02:54 PM
Background-image problem alvinchipmunk CSS 7 15th August 06 11:32 PM


All times are GMT. The time now is 12:45 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.