WordPress.com Forums » Topic: CSS Box Link not working with IE (custom header link)

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

tiagodovale — Mon, 02 Apr 2012 23:46:30 +0000

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

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

designsimply — Mon, 02 Apr 2012 23:44:27 +0000

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

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

tiagodovale — Mon, 02 Apr 2012 23:42:31 +0000

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

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

tiagodovale — Mon, 02 Apr 2012 23:18:57 +0000

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

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

designsimply — Mon, 02 Apr 2012 23:13:31 +0000

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

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

tiagodovale — Mon, 02 Apr 2012 23:11:31 +0000

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)

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

designsimply — Mon, 02 Apr 2012 22:52:03 +0000

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

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

tiagodovale — Mon, 02 Apr 2012 21:51:00 +0000

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

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

tiagodovale — Mon, 02 Apr 2012 21:44:16 +0000

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

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

tiagodovale — Mon, 02 Apr 2012 21:37:57 +0000

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?

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

designsimply — Mon, 02 Apr 2012 21:18:13 +0000

Currently, you have this:

*

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

tiagodovale.com

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

tiagodovale — Sat, 31 Mar 2012 14:00:49 +0000

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:
*

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!