IE7 Relative positions over absolute

[biggieuk]

Hi all,

 

I am trying to do what is normally a simple task of positioning a 'position:absolute' div over a 'position:relative' div containing and img tag.

 

Here is a (amazingly drawn) sample of what it looks like in all modern browsers but IE7:

 

 

In IE7 the green box for some reason is behind the big grey banner?

 

here is my css:

 

#green_box {
background:url(images/layout/business-card.png) no-repeat;
width:363px;
height:190px;
text-indent:-1000em; 
position:absolute;
margin:17px 0 0 29px;
z-index:999;
}


/**********  Feature Box **********/

#grey_container {
position:relative;
width:947px;
margin:34px auto 0 auto;
z-index: 0;
}


a.arrow_left {
position:absolute;
z-index:2;
left: 20px;
top: 89px;
width: 21px;
height: 38px;
text-decoration: none;
background:url(images/feature/arrow-left.png);
}

a.arrow_right {
position:absolute;
z-index:2;
right: 20px;
top: 89px;
width: 21px;
height: 38px;
text-decoration: none;
background:url(images/feature/arrow-right.png);
}

 

The grey box html is as follows:

 

<div id="grey_container">
            	<a href="#" class="arrow_left" title="Previous"></a>
                <a href="#" class="arrow_right" title="Next"></a>
           		<img src="images/feature/banner.jpg" height="214" width="947" alt="Banner" />
                <div id="navi"></div>
</div><!-- grey_container -->

 

Any ideas? Im going mad.

 

Thanks!

 

 

[haku]

Need more HTML.

[simcoweb]

I've never used text-indent: to position blocks. Try using the usual top: Xpx; left: Ypx; right: Zpx; instead. IE is less likely to be corn-fuzed by the method you're using. The top, right, left, etc. commands work for positioning a box within it's relative box.

[haku]

He's not positioning the block with text-indent, just the text inside of it.