Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

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

  1. 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:
    <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. designsimply
    Staff

    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. 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?

  4. 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

  5. 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...

  6. designsimply
    Staff

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

  8. designsimply
    Staff

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

  9. 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...

  10. tiagodovale
    Member

    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. designsimply
    Staff

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

  12. tiagodovale
    Member

    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

Tags