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 ( works as a landing site/portfolio and the second one as its conventional blog (

    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 linking to

    For that, I placed this link in a text/html widget:
    <a href=""><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

  2. Currently, you have this:

    <a href=""><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="" class="headertdv"></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 ( still appears over my link ( 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