PDA

Click to See Complete Forum and Search --> : simple css image gallery; works in FF and Opera but not IE possibly has-layout issue.

tomfmason
09-21-2007, 02:37 PM
I have been fighting with this for a while now and i am really starting to get annoyed. I am attempting to write a simple css image gallery where when you mouse over an image a larger version is shown over the top of the first one. Here is what I have.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.template{
display:block;
margin-top:50px;
margin-left:50px;
}

.template a, .template a:hover{display:block;}


.template ul{
list-style:none;
margin:0;
padding:0;
}

.template li{
float:left;
position:relative;
list-style:none;
padding:0;
margin:0;
padding-right:10px;
}

.template li a{
border:0;
display:block;
text-decoration:none;
}

.template li a img{
border:5px solid #6C757A;
}

.template li a:hover .large{
border:5px solid #5DA29A;
display:block;
}

.template li a:hover .large{
display:block;
position:absolute;
top:-20px;
left:-20px;
height:190px;
width:190px;
}
.template a .large{
display:none;
}
</style>
<title>Test</title>

</head>
<body>
<div class="template">
<ul>
<li>
<a href="#" title="template 1">
<img src="images/templates/template1.jpg" />
<img class="large" src="images/templates/template1.jpg" />
</a>
</li>
<li>
<a href="#" title="template 1">
<img src="images/templates/template2.jpg" />
<img class="large" src="images/templates/template2.jpg" />
</a>
</li>
</ul>
</div>
</body>
</html>


Here is a live version. http://tomfmason.net/dev/css_gallery.html . As I said in the title, it works perfectly in FF and Opera but fails in IE. I have fought with this for a while and am really close to just using some IE specific javascript for the same effect but I really don't want to use javascript if I don't have to..

I was looking at the demo in the IE developer tool bar and noticed that the li,a and imgs have has_layout:-1.. I am not really sure if that would be what is causing it to break in IE..

Any suggestions are more then welcome.

Thanks

Edit
After speaking with a friend I was told that it does in fact work in IE7 but not IE6
RGL
09-21-2007, 03:27 PM
What you're doing is very similar to a rollover menu. I have that I use on my site that works well in IE6 and 7 and Firefox.

You could simply modify this code (which is exactly what I did) i found online.
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 900px;
background: url(images/block.jpg) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: #ffffff;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: #ffffff;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color:#ffffff;
background: transparent url(images/active1.jpg) center center repeat-x;
}
tomfmason
09-21-2007, 05:22 PM
I have confirmed with several other people that my code works in FF,Opera and IE7 but fails in IE6.. Any suggestions as to why?
Centauri
09-22-2007, 07:19 AM
There are several problems here with IE6.

For IE6 to do anything with a child element of a hovered link, something must actually change on the link on hover - changing the background colour usually works ok.

Next problem is that IE6 won't handle a dynamic change in image size - once the first rollover happens and the larger image pops up, it won't then go away. Eric Meyer mentioned this on his site, and I am not aware of a fix. Probably the best way is to actually have two different sizes of each image, and just display the larger one without any resize.
WebJoel
09-22-2007, 07:56 AM
....
Next problem is that IE6 won't handle a dynamic change in image size - once the first rollover happens and the larger image pops up, it won't then go away. Eric Meyer mentioned this on his site, and I am not aware of a fix. Probably the best way is to actually have two different sizes of each image, and just display the larger one without any resize. I had a play with this last night and had it (seemingly!) working in IE6 and Fx, -then I realized that the IMAGE wasn't actually getting bigger... just the container.
-I gave up for the night, -but if :hover makes it larger, would not adding a :focus line return it to the :link state (the focus being removed, it should collapse back to non-hover??) -Jus' throwing out a suggestion... :)
Away for the day...
Centauri
09-22-2007, 08:12 AM
-but if :hover makes it larger, would not adding a :focus line return it to the :link state (the focus being removed, it shold collapse back to non-hover??)

Unfortunately, this seems to be another in the long list of IE6 bugs - an image can only be dynamically resized once via css....