Invisible Header not working in IE

  • Unknown's avatar
    jessicabalsley · Member ·

    Here’s my previous thread:
    https://en.forums.wordpress.com/topic/help-please-moving-navigation-below-header?replies=16

    I got great help, except for now… 2 months later… I realize that in Internet Explorer, both my header image and the text are showing up. One on top of the other. The invisiblity/transparency is not working for the text. Any help would be much appreciated. Here’s my site: http://theartofeducation.wordpress.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    devblog · Member ·

    Since you don’t want your site title to be visible, you don’t need these two selectors, so you can just remove them from your CSS:

    .site-title a:link,.site-title a:visited {
color:transparent;
left:100px;
position:relative;
top:200px;
text-decoration:none;
}

.site-title {
font:72px/58px Mistral,Helvetica,arial,sans-serif;
text-transform:lowercase;
margin:0;
padding:16px 0 0;
}

    Now, add this one:

    .site-title a {
display: block;
margin: auto;
position: relative;
text-indent: -9999px;
top: 200px;
width: 930px;
}

    That should fix your issue.

  • Unknown's avatar
    jessicabalsley · Member ·

    Thank you- I will give it a try!

  • Unknown's avatar
    jessicabalsley · Member ·

    devblog,
    Thank you, your solution worked in making the text header disappear, but there’s still a problem. I should have mentioned it in my OP, but in the thread I linked to, my main goal was to make the header text disappear while at the same time making my header image clickable so that it would take you back to the mainpage. This is to avoid having to have a ‘home’ button in the menu.

    So, making the text header disappear while simultaneously making it clickable appears to have worked in Safari, Chrome, Firefox, but not in IE. Any other suggestions?

    Thanks so much!
    Jessica

  • Unknown's avatar
    jessicabalsley · Member ·

    I found this tip on another site, tell me if you think this is a viable option… or maybe this only works with wordpress.org?

    http://www.smemon.com/how-to-make-a-header-image-clickable-in-wordpress/

    Go in to header.php, and replace the red code below with the green code. Problem solved

    <div id=”header”>

    to

    <div id=”header” onclick=”location.href=’http://siteaddress/’;” style=”cursor: pointer;”>

  • Unknown's avatar
    timethief · Member ·

    Go in to header.php, and replace the red code below with the green code. Problem solved

    We cannot access the php in the templates underlying our themes and edit it or our themes on free hosted wordpress.com blogs. this is a multiuser blogging platform and all blogs wearing the same theme are using the same template. Only Staff can access those files and edit as every edit they make affects all blogs wearing the same themes. Please wait patiently for another Volunteer who helps with CSS to provide a different means, if possible, of achieving what you want.

  • Unknown's avatar
    devblog · Member ·

    ….but not in IE. Any other suggestions?

    Yeah, take IE behind the shed and shoot it!

    Because of all the positioning, the “hot spot” of the link is lost in IE… (dirty) solution: add a background to the link. So, do the same as I said above, but add a background to the “.site-title a” selector. This background needs to be transparent. Now, if you do this:

    .site-title a {
background: transparent;
display: block;
margin: auto;
position: relative;
text-indent: -9999px;
top: 200px;
width: 930px;
}

    You would still have the same effect: no “hot spot”… so, you’ll need a transparent image (.gif file). You can grab this one:

    upload it to your blog and use it from there, or use the image directly from my blog:

    background: transparent url(http://csswiz.files.wordpress.com/2009/08/nothing.gif) 0 0;

    However, if you use the image directly from my blog, could present a little problem… if one day I delete my blog, then you wouldn’t have access to that image anymore and you would have the link problem again; so, I would recommend you to download the image to your desktop and upload it to your blog.

    The selector now should look something like this:

    .site-title a {
background: transparent url(URL/TO/IMG/nothing.gif) 0 0;
display: block;
margin: auto;
position: relative;
text-indent: -9999px;
top: 200px;
width: 930px;
}

    That should make it work in IE too.

  • Unknown's avatar
    timethief · Member ·

    <blockquote. Yeah, take IE behind the shed and shoot it!
    AMEN!

  • Unknown's avatar
    thesacredpath · Member ·

    If IE were taken out behind the shed and shot, there would be thousands of web designers dancing in the streets. I know I’d be dancing.

  • Unknown's avatar
    thesacredpath · Member ·

    If IE were taken out behind the shed and shot, there would be thousands of web designers dancing in the streets. I know I’d be dancing.

  • Unknown's avatar
    thesacredpath · Member ·

    See how much I mean that? I posted it twice for emphasis.

  • Unknown's avatar
    jessicabalsley · Member ·

    That did it! Thank you very much, devblog! I went ahead and uploaded that transparent image to my blog so it wouldn’t be lost. Great solution, and now the clickable area of my header image is much larger! :)

  • Unknown's avatar
    devblog · Member ·

    Think nothing of it.

  • The topic ‘Invisible Header not working in IE’ is closed to new replies.