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

  • Author
    Posts
  • #859072

    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 blog.tiagodovale.com.

    #859375

    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>

    #859376

    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?

    #859377

    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

    #859378

    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…

    #859379

    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;
    }
    #859382

    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)

    #859383

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

    #859384

    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…

    #859386

    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. :)

    #859387

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

    #859388

    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.