IE6,7 on a link hover, absolute positioning not changing on child

I have the following HTML and CSS:

<div id="topdevelopments" class="colnm colw6 clearfix">
    <a href="homes-for-sale/development/beaufort-park-6/" class="colnm agreen colw2"> 
        <img src="wp-content/themes/philosophy/images/noimage/212x153.png" width="212" height="153" alt="No Image" title="No Image" />
        <span class="popup"> 
            <span class="first">Recent development</span> 
            <span class="heading">Beaufort Park 6</span> 
        <span class="content">1, 2 & 3 bedroom apartments available from £160,000</span> 
        </span> 
        <span class="ir corner">&nbsp;</span> 
        <span class="ir go">&nbsp;</span> 
    </a> 
    <a href="homes-for-sale/development/beaufort-park-5/" class="col apurple colw2"> 
        <img src="wp-content/themes/philosophy/images/noimage/212x153.png" width="212" height="153" alt="No Image" title="No Image" />
        <span class="popup"> 
            <span class="heading">Beaufort Park 5</span> 
            <span class="content">1, 2 & 3 bedroom apartments available from £160,000</span> 
        </span> 
        <span class="ir corner">&nbsp;</span> 
        <span class="ir go">&nbsp;</span> 
    </a> 
    <a href="homes-for-sale/development/beaufort-park-4/" class="col ablue colw2"> 
        <img src="wp-content/themes/philosophy/images/noimage/212x153.png" width="212" height="153" alt="No Image" title="No Image" />
        <span class="popup"> 
            <span class="heading">Beaufort Park 4</span> 
            <span class="content">1, 2 & 3 bedroom apartments available from £160,000</span> 
        </span> 
        <span class="ir corner">&nbsp;</span> 
        <span class="ir go">&nbsp;</span> 
    </a>
</div>

CSS:

#topdevelopments {

}
    #topdevelopments a {
        border:#4D4D4D 10px solid;
        display:block;
        color:#fff !important;
        font-family:"MetaPlusBookRoman", sans-serif;
        font-size:16px;
        height:153px;
        margin-bottom:10px;
        overflow:hidden;
        position:relative;
        width:212px;
    }
        #topdevelopments a span { display:block; }
        #topdevelopments a span.popup {
            height:133px;
            left:0px;
            overflow:hidden;
            padding:10px;
            position:absolute;
            top:153px;
            width:192px;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        #topdevelopments a:hover span.popup { top:0px; }
        #topdevelopments a.agreen span.popup { background-color:#C1D82F; }
        #topdevelopments a.ablue span.popup { background-color:#36A6E8; }
        #topdevelopments a.apurple span.popup { background-color:#C6168D; }
        #topdevelopments a span.popup .first {
            font-family:"MetaPlusBlackRoman", sans-serif;
            font-size:20px;
            opacity:0.5;
        }
        #topdevelopments a span.popup .heading {
            border-bottom:#fff 2px solid;
            font-family:"MetaPlusBlackRoman", sans-serif;
            font-size:20px;
            margin-bottom:5px;
        }
        #topdevelopments a span.corner {
            background:url(images/corner/corner-dgrey.png);
            bottom:0px;
            height:40px;
            position:absolute;
            right:0px;
            width:40px;
        }
        #topdevelopments a span.go {
            bottom:4px;
            height:16px;
            position:absolute;
            right:4px;
            width:16px;
        }
        #topdev开发者_JAVA技巧elopments a.agreen span.go { background-image:url(images/go/go-green.png); }
        #topdevelopments a.ablue span.go { background-image:url(images/go/go-blue.png); }
        #topdevelopments a.apurple span.go { background-image:url(images/go/go-purple.png); }
        #topdevelopments a.agreen:hover span.go { background-image:url(images/go/goh-green.png); }
        #topdevelopments a.ablue:hover span.go { background-image:url(images/go/goh-blue.png); }
        #topdevelopments a.apurple:hover span.go { background-image:url(images/go/goh-purple.png); }

What should happen is that when the "A" is hovered the "span" that is absolutely positioned out of the view should come into view by changing the "top" parameter. This works but in IE6 and IE7 only does it fail to work. I cannot figure out why. Anyone know why?

I'll add that each of the "A" links are floated left.

add:

#topdevelopments a:hover {
  text-indent: 0;
}

IE likes a rule on the a:hover before it will activate an extension of it e.g a:hover span

anything will do as long as it's not already declared on the a rule

i.e. I picked text-indent: 0 as it is a default that is not already on the a rule

I created this JSFiddle. I think you were missing :hover on #topdevelopments a span.go.

Edit although that appears to work, you lose the cursor icon on the links that appear! You could possibly rectify that with more CSS but it seems a bit messy. If the other solution works it might be more elegant.