SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    A question for Paul (others welcome too!)

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It does now. Thank you Paul!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •