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

  • Unknown's avatar
    tiagodovale · Member ·

    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:
    <span class="headertdv">*</span>

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

    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: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    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>

  • Unknown's avatar
    tiagodovale · Member ·

    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?

  • Unknown's avatar
    tiagodovale · Member ·

    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

  • Unknown's avatar
    tiagodovale · Member ·

    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…

  • Unknown's avatar
    designsimply · Member ·

    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;
}
  • Unknown's avatar
    tiagodovale · Member ·

    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)

  • Unknown's avatar
    designsimply · Member ·

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

  • Unknown's avatar
    tiagodovale · Member ·

    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…

  • Unknown's avatar
    tiagodovale · Member ·

    Fixed it with this: background:#fff;
    opacity:0;

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

  • Unknown's avatar
    designsimply · Member ·

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

  • Unknown's avatar
    tiagodovale · Member ·

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

  • The topic ‘CSS Box Link not working with IE (custom header link)’ is closed to new replies.