IE will not clear the previous image

[Koddy]

Hi guys, my first post so apologies if i screw up in relation to forum protocol.

I'm working on a site which has a picture gallery.
It works fine in FF but in IE the images load but do not clear the previous image underneath. I can't see anything wrong with it when comparing to the code i took off another site. Any help is extremely appreciated as i have been stuck for days now on this small problem.

Css:
a, a:visited, a:hover, a:active {color:#000;}
#Gallery_Container {text-align: center; width: 760px; height: 265px;}
#Container {position:relative; width:480px; height:257px; border:1px solid #a49188; margin:auto; font-family: helvetica; font-size:0.8em;}
#Container_Thumbs {width:136px; position:absolute; left:0; top:0; }

#Container_Thumbs a.pics {float:left; display:block; margin: 2px; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:60px; height:40px; cursor:default;}
#Container_Thumbs a.pics img.thumb {display:block; border:0;}

#Container a.pics span {display:none; position:absolute; border:0; width:328px; height:200px; top:2px; left:142px; text-align:center;}
#Container a.pics span img {margin:10px auto; border:1px solid #000;}

#Container a.pics:active,
#Container a.pics:focus {border:1px solid #fc0;}

#Container a.pics:active span,
#Container a.pics:focus span {display: block; position:absolute; width:328px; height:200px; left:142px; top:2px;}

HTML:
<div id="Gallery_Container">
<div id="Container">
<div id="Container_Thumbs">
<a class="pics" href="#nogo1"><img class="thumb" src="images/Near_Jamieson_Thumb.jpg" alt="" />
<span><img src="images/Near_Jamieson_Large.jpg" alt="Near Jamieson" title="Near Jamieson" /><br />
Near Jamieson - 60x45 - Oil - $A800</span> </a>

<a class="pics" href="#nogo2"><img class="thumb" src="images/Yea_Pasture_Thumb.jpg" alt="" />
<span><img src="images/Yea_Pasture_Large.jpg" alt="Yea Pastures" title="Yea Pastures" /><br />
Yea Pastures - 66x47 - Oil - $A800</span> </a>

<a class="pics" href="#nogo3"><img class="thumb" src="images/Princes_Bridge_Tram_Thumb.jpg" alt="" />
<span><img src="images/Princes_Bridge_Tram_Large.jpg" alt="Princes St Bridge, Melbourne" title="Princes St Bridge, Melbourne" /><br />
Princes St Bridge, Melbourne - 41x51 - Oil - $A1400</span> </a>

<a class="pics" href="#nogo"><img class="thumb" src="images/Cliffs_At_Anglesea_Thumb.jpg" alt="" />
<span><img src="images/Cliffs_At_Anglesea_Large.jpg" alt="Cliffs At Anglesea" title="Cliffs At Anglesea" /><br />
Cliffs At Anglesea - 51x41 - WC - $A380</span> </a>

<a class="pics" href="#nogo"><img class="thumb" src="images/View_From_The_You_Yangs_Thumb.jpg" alt="" />
<span><img src="images/View_From_The_You_Yangs_Large.jpg" alt="View From The You Yangs" title="View From The You Yangs" /><br />
View From The You Yangs - 51x41 - WC - $A380</span> </a>

<a class="pics" href="#nogo"><img class="thumb" src="images/Panorama_Near_Ballarat_Thumb.jpg" alt="" />
<span><img src="images/Panorama_Near_Ballarat_Large.jpg" alt="Panorama Near Ballarat" title="Panorama Near Ballarat" /><br />
Panorama Near Ballarat - 51x41 - WC - $A380</span> </a>

<a class="pics" href="#nogo"><img class="thumb" src="images/Bright_Homestead_Thumb.jpg" alt="" />
<span><img src="images/Bright_Homestead_Large.jpg" alt="Bright Homestead" title="Bright Homestead" /><br />
Bright Homestead - 51x41 - WC - $A380</span> </a>

<a class="pics" href="#nogo"><img class="thumb" src="images/Mallee_Morning_Sun_Thumb.jpg" alt="" />
<span><img src="images/Mallee_Morning_Sun_Large.jpg" alt="Mallee Morning Sun" title="Mallee Morning Sun" /><br />
Mallee Morning Sun - 51x41 - WC - $A380</span> </a>

<a class="pics" href="#nogo"><img class="thumb" src="images/Werribee_Gorge_Vista_Thumb.jpg" alt="" />
<span><img src="images/Werribee_Gorge_Vista_Large.jpg" alt="Werribee Gorge Vista" title="Werribee Gorge Vista" /><br />
Werribee Gorge Vista - 78x94 - Oil - $A1000</span> </a>

<a class="pics" href="#nogo"><img class="thumb" src="images/Country_Road_Kalkallo_Thumb.jpg" alt="" />
<span><img src="images/Country_Road_Kalkallo_Large.jpg" alt="Country Road, Kalkallo" title="Country Road, Kalkallo" /><br />
Country Road, Kalkallo - 109x89 - WC - A$1200</span> </a>
</div>
</div>
</div>

[SuzyUK]

Hi Koddy and Welcome to WebmasterWorld [webmasterworld.com]!

Your post is fine though maybe a bit too much specifics in the images code which I'll edit, but thank you.

Is this only happening in IE6?

Anyhow this is Stu Nichols CSS Gallery, so you should really go to him for support, but my interest was peaked at the sticky "pop-up" with

:active

instead of

:hover

so I took his code direct from the page to get some actual images and used his CSS to make sure it worked, then I just input your css against it. I had to add in your extra wrapper divs to ensure it wasn't one of them, which I hope I did in the right place

and lo and behold it is the same, as the :hover sticky popup problem, the difference between your code and his is very subtle. What you've done shouldn't cause a problem, except it's IE ;) [looking for older reference thread but can't find it]

#Container a.pics span {display:none; position:absolute; border:0; width:328px; height:200px; top:2px; left:142px; text-align:center;}

remove the

position: absolute;

from the above code.

The following line of code puts it back when necessary:

#Container a.pics:active span,
#Container a.pics:focus span {display: block; position:absolute; width:328px; height:200px; left:142px; top:2px;}

There should be nothing wrong with having it in both places, though it should only actually be necessary in one of the rules (this applies to all the rules in those 2 lines actually) but position absolute is a hasLayout triggering property and does strange things in IE!

note: width and height are also hasLayout triggering properties, but because this is a <span>, an inline element, they are not recognised as such (inline elements don't accept width/height) until something else triggers it, e.g. position absolute, zoom: 1; float:..

there is/was a problem when using the display none/block method of toggling the display, whenever a hasLayout triggering property was also used, so the best solution is to keep hasLayout triggering properties off the "display:none" rule and just put them in the toggling "display: block" rule.

It appears that this applies to not only

:hover

, but also

:active

and

:focus

too ;)

so it could now look like this:

#container a.pics span {display:none;}

#container a.pics:active span,
#container a.pics:focus span {display: block; position:absolute; border:0; width:328px; height:200px; top:2px; left:142px; text-align:center;}

as an aside there is another difference in your code which will also affect IE6..

#Container_Thumbs a.pics {float:left;

display:block;

margin: 2px;

display:inline-block;

color:#000; text-decoration:none; border:1px solid #000; width:60px; height:40px; cursor:default;}

the two display properties are not necessary, all floated items are display:block by default and *shouldn't* pay attention to any display properties in the same rule.. however IE has another bug, the double margin bug, and the fix for that is to add

display: inline;

, why? nobody knows, all other browsers ignore it as they should.. but that's why it's in Stu's code and as you're actually using margins you will need it too

hth
Suzy

[Koddy]

Hi Suzy,
You are an absolute legend! Worked like a treat.
The hours i've spent playing with the code and it took me a minute to fix after using your suggestions.

Taking out the position:absolute and the width\height etc from the span line and it works fine now in IE6!

My main problem is that i can throw together some code and make something half decent but i don't really have a full understanding about what the code is actually doing and how it affects different browsers...but i'm learning slowly.

Maybe i can send you the link for the completed site when it is on the web.

A million thanks again.
Koddy