JohnV
10-30-2006, 03:30 AM
I have a page designed for IE that displays my images just as I want it to. When you hover over a thumbnail, the expanded image div becomes visible. I need for the right edge of the expanded photo to overlap the left edge of the thumbnail so that you can move the tooltip off the thumb and onto the expanded photo. When I view the same page in Foxfire, the expanded photos are aligned so that the left edge of the expanded photo is where the right edge appears in IE. This ruins the effect as the expanded photos are now 50% or more off the workarea.
Here is the link: http://www.thenational.us/
I am in development phase so none of the links on this page are active but you can view it in IE and Foxfire to see the shift in where the expanded images overlap the thumbs.
You can view the CSS on the page, but below is the effected css. I have tried changing the position between relative and absolute, and I have tried giving "left" a value of auto. No matter what I try I cannot get foxfire to align the expanded images to align as they are in IE (right edge of expanded image on left edge of thumb.
Anyone know how to get the expanded images to position in foxfire as they do in IE?????? I cannot hardcode the width as this will be dynamically displayed images based on latest photos submitted. So I do not know ahead of time which ones they will be and I am trying to stay away from javascript solutions. Thanks, JohnV
.gallerycontainer{
position: relative;
align: right;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
align: right;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
align: right;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
/* left: -500px; */
left: auto;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
position: absolute;
visibility: visible;
top: -140;
right: 100 px; /*position where enlarged image should offset horizontally */
left: auto;
z-index: 50;
}
Here is the link: http://www.thenational.us/
I am in development phase so none of the links on this page are active but you can view it in IE and Foxfire to see the shift in where the expanded images overlap the thumbs.
You can view the CSS on the page, but below is the effected css. I have tried changing the position between relative and absolute, and I have tried giving "left" a value of auto. No matter what I try I cannot get foxfire to align the expanded images to align as they are in IE (right edge of expanded image on left edge of thumb.
Anyone know how to get the expanded images to position in foxfire as they do in IE?????? I cannot hardcode the width as this will be dynamically displayed images based on latest photos submitted. So I do not know ahead of time which ones they will be and I am trying to stay away from javascript solutions. Thanks, JohnV
.gallerycontainer{
position: relative;
align: right;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
align: right;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
align: right;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
/* left: -500px; */
left: auto;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
position: absolute;
visibility: visible;
top: -140;
right: 100 px; /*position where enlarged image should offset horizontally */
left: auto;
z-index: 50;
}