Need help? Check out our Support site, then


Missing Header Blog Title in IE, But Not FF

  1. I'm reworking my Sandbox theme to look similar to Fadtastic. My blog title shows up on top of the header image in Firefox, but is invisible in Internet Explorer. Any ideas?

    #header {
    height:0;
    padding:0;
    }

    #blog-title {
    text-align:center;
    width:100%;
    padding-top:25px;
    }

    #blog-title a {
    color:#fff;
    font-weight:bold;
    }

    #blog-title a:hover {
    color:#fff;
    }

    #blog-description {
    color:#fff;
    text-align:center;
    width:100%;
    font-size:1.2em;
    }

    #access {
    background:url('http://inrepair.files.wordpress.com/2008/01/bg_header_effect.gif') repeat-x left top #006699;
    border-top:3px solid #F0F0F0;
    border-bottom:3px solid #F0F0F0;
    float:left;
    padding-top:90px;
    width:100%;
    }

  2. Why do you have the height set to 0 in your #header id selector? Personally, I don't think that's correct. The problem might be right there.

  3. @ devblog: If I don't, there's a white gap above the blue header image. I'll try setting it to something really small and see what happens.

  4. @ devblog: I think that was the problem, as it's now displaying in IE. One more question... Why would IE shove the title and description further down on the background image than FF? Here's my new, improved code:

    #header {
    background:url('http://inrepair.files.wordpress.com/2008/01/bg_header_effect.gif') repeat-x left top #006699;
    height:90px;
    }

    #blog-title {
    text-align:center;
    width:100%;
    padding-top:20px;
    }

    #blog-title a {
    color:#fff;
    font-weight:bold;
    }

    #blog-title a:hover {
    color:#fff;
    }

    #blog-description {
    color:#fff;
    text-align:center;
    width:100%;
    font-size:1.2em;
    }

    #access {
    background:#fff;
    border-top:3px solid #F0F0F0;
    border-bottom:3px solid #F0F0F0;
    float:left;
    width:100%;
    }

  5. The thing is that the blog-title and blog-description are child elements of the #header element. You cannot have a parent element set to 0 when you have child elements being displayed.

    BTW, last time I checked your blog in IE6, the header was not visible, not it is... however, I cannot see the body of your blog.

  6. you type a lot faster than I do...

    If you don't mind, I'll take a look at it some time this weekend and will give you some suggestions.

  7. @ devblog: Thank you very much. I'll appreciate any advice you can give me to make my blog more accessible in different browsers. Is there an easy way for me to validate it?

  8. @ rosclarke: Thank you! That page is awesome.

  9. @ devblog: I've cleaned up my css as much as I know how. I separated the properties into separate statements, which I read was more compatible with IE6. I did get IE6 to display the header and menu, but there's still nothing in the body of the page.

    Here's the direct link to my CSS:

    http://inrepair.net/?css=css&rev=55

  10. alright, I'll be taking a look at it as soon as I can.

  11. I'd suggest you to change your #wrapper definition with the following:

    #wrapper {
    	background-color:#fff;
    	width: 900px;
    	position:relative;
    	text-align:left;
    	border-right: solid 25px #d3e6ef;
    	border-left: solid 25px #d3e6ef;
    	margin:32px auto;
    }

    Note that I removed:

    min-width:780px;
    max-width:900px;

    This is because IE6 ignores those rules, thus making your content invisible. Instead, I just set it to a fixed width of 900px;

    Also, note that you don't need to do this:

    border-right-width:25px;
    border-right-style:solid;
    border-right-color:#d3e6ef;
    border-left-width:25px;
    border-left-style:solid;
    border-left-color:#d3e6ef;

    That's just too much. I'd recommend you to use the shorthand instead (which I defined in my suggestion above:

    border-right: solid 25px #d3e6ef;
    border-left: solid 25px #d3e6ef;

    These changes should make your blog look good in IE6 as well.

    HTH.

    PS what was "messing" everything up in IE6 were the min-width and max-width properties.
    IE's fault, of course.

  12. @ Devblog: You are a genius!

    Do you recommend that I go shorthand on all my styles? I read somewhere that IE6 didn't like it, so that's why I went through and separated them. I prefer shorthand though, as it's much easier to enter.

    I guess I'll just try the shorthand and see what happens. ;)

  13. I went shorthand on my styles and my site looks great in an IE6 render. Not so good in IE5.5. I don't get my sidebar. Should I be concerned, or is that browser to old to worry about?

    Here's the renderer I used: http://ipinfo.info/netrenderer/index.php

  14. Great!

    Personally, I don't care about how my sites look in IE5 because like you said it, it's too old to worry about. As long as it looks good in IE6 and up, that's fine.

    And no, IE6 does like shorthands... I use them all the time and it doesn't complain about it; so yes, I'd recommend you to use shorthands.

    HTH

  15. Thanks, devblog. You're awesome!!

Topic Closed

This topic has been closed to new replies.

About this Topic