Need help? Check out our Support site, then


CSS Box Link not working with IE (custom header link)

  1. Hi,

    I have two blogs: the fist one (tiagodovale.com) works as a landing site/portfolio and the second one as its conventional blog (blog.tiagodovale.com).

    In an effort to implement the standard behavior of having the header link to home, I tried developed a strategy for having the header of blog.tiagodovale.com linking to tiagodovale.com.

    For that, I placed this link in a text/html widget:
    <a href="http://tiagodovale.com"><span class="headertdv">*</span></a>

    and styled it in CSS so that it draws a box link over the header:
    .headertdv {<br /> height:288px;<br /> position:absolute;<br /> top:32px;<br /> width:1000px;<br /> z-index:200!important;<br /> margin:0 0 0 -661px;<br /> display:inline-block;<br /> font-size:0;<br /> }

    It works beautifully with Chrome, Firefox and Safari (though it doesn't resize with the header when one decreased the browser window's width) but not at all with IE.

    Does anyone have a suggestion to make the code IE compatible?

    Thank you, guys!

    The blog I need help with is blog.tiagodovale.com.

  2. Currently, you have this:

    <a href="http://tiagodovale.com"><span class="headertdv">*</span></a>

    You need to position the link itself, not the span inside the link. So try updating that HTML to this instead:

    <a href="http://tiagodovale.com/" class="headertdv">tiagodovale.com</a>

  3. Thanks for the tip :)

    But I'm afraid it didn't change a thing... Still works on Firefox/Chrome/Safari and not at all on Internet Explorer...

    Any suggestions?

  4. It seems to be there, but behind the header image/link... I used the z-index to deal with it: I wonder if it doesn't work with IE... bummer

  5. When I set it to display a border, the border renders over the header image, but the header link is over my box link, for some reason...

  6. I tested it in IE8 just now and the link you added works for me.

    However, I usually reposition a little differently. Try removing the .headertdv block you have now and add the following to the bottom of your Appearance → Custom Design → CSS page:

    #page {
    position: relative;
    }
    
    .headertdv {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 288px;
    text-align: left;
    text-indent: -9999px;
    }
  7. Your code works better! :)

    But, unfortunately, the original header link (blog.tiagodovale.com) still appears over my link (tiagodovale.com) on IE 9.1... (and still works perfectly on all the others)

  8. IE9! Just to make sure, do you have the "text-align: left" part in your .headertdv block?

  9. Thanks for your patience... :)
    I added it and tested it just now, but it didn't change anything... :$

    The border appears on top of the header image, but the header link is in front of the box link...

  10. Fixed it with this: background:#fff;<br /> opacity:0;

    There's apparently a bug in IE9 with z-index: can't really tell why this solved it, but it's working. :)

  11. What a strange fix :) but if it's working then great! Thanks for posting back with your findings.

  12. Thank you: for your time, attention and for pointing me in the right direction ;)

Topic Closed

This topic has been closed to new replies.

About this Topic