Grow your CSS skills. Land your dream job.

[Solved] Hiding h1 in IE Using display:none or text-indent

  • # September 16, 2009 at 3:40 pm

    Hey everyone,
    I think this should be a fairly simple issue, but I can’t seem to find a suitable answer around the ‘nets.
    so,
    I’m trying to hide the header that reads "The Ryan Gregson Web-log" that shows up in orange in IE (not the image with the same caption above)
    I can get it to disappear in firefox using the display: none, and the text-indent: -9999px, but neither work in IE. What to do?
    this is done in wordpress, btw, playing with the whiteboard theme.

    here’s the site:

    http://www.ryangregson.com/blog
    the site is kinda lame, I know, i’m just learning.

    here’s some code where the problem should be:
    this is code from the header.php. the wrapper and container divs are closed in the footer.php.

    Code:

    /”>< ?php bloginfo('name'); ?>

    < ?php bloginfo('description'); ?>

    and here’s the CSS

    Code:
    #maincol { width: 460px; float: left;padding-left: 50px;padding-top: 50px;}
    body {margin: 0px auto;background: black;}
    #topthing{width: 1400px; height: 338px; background: url(/blog/wp-content/themes/whiteboard/images/myheader.jpg) black; margin: 0px auto;}
    #topthing a{
    margin: 0 auto;
    padding-top: 100px;
    display: block;
    width: 700px;
    height: 200px;
    }
    h1#logo{display: none; /*text-indent: -9999px;*/}

    #container{width: 1400px;background: url(/blog/wp-content/themes/whiteboard/images/middle.jpg) repeat-y;margin: 0px auto;}
    #wrapper{width: 700px; margin: 0px auto;}

    any help would be appreciated, thanks!

    also I just ran the Validator, and it came up with this response which could be relevant, but honestly, this is not direct enough for me to be helpful:

    Line 79, Column 3: unclosed start-tag requires SHORTTAG YES

    <h1 id="logo"><a href="http://www.ryangregson.com/blog/">The Ryan Gregson Web-

    ?

    The construct <foo<bar> is valid in HTML (it is an example of the rather obscure “Shorttags” feature) but its use is not recommended. In most cases, this is a typo that you will want to fix. If you really want to use shorttags, be aware that they are not well implemented by browsers.

    # September 16, 2009 at 4:28 pm

    It’s because you’re using the wrong term! It can get a little confusing with text because so many things sound the same, but this is what you’re looking for:

    text-indent: -9999px;

    # September 16, 2009 at 5:21 pm

    that would be it, but I actually just accidently used the term "align" instead of indent on this post, not in the actual code. I’ve since edited this post to be more accurate.

    # September 16, 2009 at 5:32 pm

    Perhaps because you have it commented out?

    h1#logo{display: none; /*text-indent: -9999px;*/}

    # September 16, 2009 at 5:45 pm

    okay, apparently i’ve made this more complicated than I intended.
    for intents and purposes we will ignore the display:none method, and just focus on the text-indent method.
    here’s the new css code with the same results as before.

    Code:
    h1#logo{text-indent: -9999px;}
    # September 16, 2009 at 6:21 pm

    aaahhhh

    Try:

    h1#logo a { text-indent:-9999px; }

    # September 16, 2009 at 6:33 pm

    aargh. that’s not doing it. not in IE.

    # September 16, 2009 at 8:32 pm

    Wrap the text in a span, so:

    HTML

    CSS

    Code:
    #logo a {display:block;height:xxxpx;width:xxxpx;} Width and height of the image you are using as the link.
    #logo a span {visibility:hidden;}

    I didn’t try it in IE. I will in like two hours if you haven’t found the solution yet.

    # September 17, 2009 at 2:50 am

    It appears that your opening "wrapper" div tag is missing the closing bracket. In your header.php:

    Code:

    /”>< ?php bloginfo('name'); ?>

    < ?php bloginfo('description'); ?>

    Should be:

    Code:

    /”>< ?php bloginfo('name'); ?>

    < ?php bloginfo('description'); ?>

    That may or may not fix your problem in IE, but it should certainly be a start, and will definitely fix the validation error! :)

    # September 17, 2009 at 11:54 am

    Wow, that sure did it. Good eye! thanks everyone for sticking with me on that.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".