CSS Image Gallery - Large image not showing

[MariaS]

Hi,
I am using this code on a page I designed, but the large images are not showing: http://www.sharonhurst.com/MyWork.htm
Other parts of the CSS code are working, like the thumbnail border, so I don't know what is going on. :(I appreciate any help!
Thanks!

[ETpro]

Hi,
I am using this code on a page I designed, but the large images are not showing: http://www.sharonhurst.com/MyWork.htm
Other parts of the CSS code are working, like the thumbnail border, so I don't know what is going on. :(I appreciate any help!
Thanks!Maria, I'm not sure what's supposed to go one here, but the code seems odd. The links on the thumbnails are set to open separate pages in a new window. What's supposed to happen when I click one of the thumbnails?

[MariaS]

Thank you for your prompt reply to my post. Sorry, I was doing a test and had the thumbnails open a new window. I have removed it. It is supposed to show the larger image on the center when you hover over the thumbnails only.

[ETpro]

Hi,
I am using this code on a page I designed, but the large images are not showing: http://www.sharonhurst.com/MyWork.htm
Other parts of the CSS code are working, like the thumbnail border, so I don't know what is going on. :(I appreciate any help!
Thanks!OK, That makes better sense. I notice that your span that's supposed to hold the big version of the thumbnail seems to be located a couple of hundred pixels too far to the left. That isn't preventing the image from displaying, but it probably wouldn't look like you want it to if it did display. Here's a screen capture of Firebug highlighting the span.
http://lib.store.yahoo.net/lib/test-prod-st78-etpro/sharonhurst1.jpg

Now, as to why the big images don't show up, what is supposed to togged the visibility: hidden; for .thumbnail span? It would appear to me that nothing is ever changing the visibility from hidden to visible.

[MariaS]

Seeing the screen shot of where the big picture is showing was very helpful. That is a problem apart that I will have to deal with, but I still cannot figure out why is the large pic is not showing. Do you think it is something to do with the site general CSS file? It is locatesd at http://www.sharonhurst.com/sharonhurst.css. I am not sure, but the code used to work until I added the overflow property on the sidebar2:
.thrColFix #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 180px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
height: 350px;
background: #9C9579; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0 10px 0 10px; /* padding keeps the content of the div away from the edges */
margin: 0 0 10px 0;
overflow:auto; /*change this to auto when there are many shows listed*/
SCROLLBAR-FACE-COLOR: #9C9579;
SCROLLBAR-HIGHLIGHT-COLOR: #9C9579;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
SCROLLBAR-width: 3px;
}

Do you think it has anything to do with it?

Thanks,
Maria

[ETpro]

OK, I do see the

.thumbnail:hover span {
visibility: visible;
}

in your style sheet. The W3C CSS Validator is complaining about some of the hacks in the CSS designed to make IE act like a real browser, but I don't see any errors that should intefere with the Hover pseudoclass firing onHover. For some reason, it isn't attaching to the <span class="thumbnail">. Maybe the DD Admin can see something I'm missing.

[MariaS]

Hi,

Well, I reconstructed the page, division by division and checked the CSS on each one of them. I found out that the problem was wit the "overflow" property I had on the division image gallery was in (sidebar2 on the main css file). Once I removed it, the hover started to work and the large image showed. I also changed the positioning of the span so that the image would show on the center of the page design.

Now it works fine on IE, but not on Firefox. The center static picture is pushed down. Any ideas?

Thanks,
Maria

[azoomer]

if you change this part of the css, I think it will line up with the other pictures


.thrColFix #mainContent {
float:left;
height:355px;
margin-bottom:10px;
margin-left:14px;
margin-right:10px;
margin-top:-359px;
width:370px;
}
Okay that is firefox, but i haven't seen it in IE.

Edit:
Another thing you could try is to make the position:absolute and change margins accordingly like this


.thrColFix #mainContent {
float:left;
height:355px;
margin-bottom:10px;
margin-left:194px;
margin-right:10px;
margin-top:1px;
position:absolute;
width:370px;
}
I guess there a better change that this will work in IE as well ?

[MariaS]

Hi Azoomer,
Thank you for your help. Your second CSS works on both IE and Firefox, but it is massing up another page on the site (http://www.sharonhurst.com/Shows.htm). There is a script on that page that makes the length of the left column change based on the size of the main content plus the length of the bottom bar so that the left bar ends at the same height as the bottom bar aligned with the footer of the page. Do you have any idea why is this happening?
Thanks,
Maria