A question for Paul (others welcome too!)

HTML & CSS
1

Paul, I was reading a response to a post, http://www.sitepoint.com/forums/showthread.php?t=699066, where you say IE6 and 7 dont understand “z-index:auto”.

This made think modification I was trying to make to a common Image Replaceable method. The code would be as follows:

<a href=“#” id=“logo”><span>Your logo here</span></a>

#logo{display:block;
position:relative;
background:url(logo.jpg) no-repeat;
height:100px;
width:150px;
}
#logo span { height:inherit;
width:inherit;
position:absolute;
top:0;left:0;
overflow:hidden;
z-index:-1;
}

I actually have 2 questions ;
#1 why does overflow:hidden cause , IF APPLIED TO #logo, seems to cause it to NOT be displayed. I would have though the element being given explicit height, would display at that height.

#2 Since in order to do accurate APing you need to RP its parent, I suppose it would be do IR by hiding the text BEHIND it container, rather than pasting an adjacent tag and APing it on top of the text ?

I guess it occurred that it may seem to be working for me because normally I AP my logos, so its an AP within an AP.

Your take on this is greatly appreciated

2

It does now. Thank you Paul!

3

Hi,

IE6 and 7 don’t understand the keyword inherit so they will just have auto widths and will spill out unless you add overflow:hidden to the parent.

To put the text under the parents background in IE6 then remove the position:relative from the parent and at the same time remove the co-ordinates from the child.

If you leave top and left in place then the element is placed in respect of the nearest positioned ancestor or the viewport if none exists. If you omit the co-ordinates then the element becomes absolutely positioned at the point it currently occupies in the flow which is exactly where you want it. You just have to make sure that text-alignment is set to left or IE will mis-position the element.


#logo {
    display:block;
    background: red url(logo.jpg) no-repeat;
    height:100px;
    width:150px;
    overflow:hidden;
}
#logo span {
    position:absolute;
    z-index:-1;
    height:100px;
    width:150px;
}

Does that answer your question :slight_smile: