Missing Header Blog Title in IE, But Not FF

  • Author
    Posts
  • #178408

    sundrop74
    Member

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

    #178650

    devblog
    Member

    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.

    #178651

    sundrop74
    Member

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

    #178652

    sundrop74
    Member

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

    #178654

    devblog
    Member

    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.

    #178655

    devblog
    Member

    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.

    #178689

    sundrop74
    Member

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

    #178696

    rosclarke
    Member
    #178746

    sundrop74
    Member

    @ rosclarke: Thank you! That page is awesome.

    #178749

    sundrop74
    Member

    @ 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

    #178755

    devblog
    Member

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

    #178769

    devblog
    Member

    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.

    #178774

    sundrop74
    Member

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

    #178775

    sundrop74
    Member

    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

    #178776

    devblog
    Member

    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

    #178777

    sundrop74
    Member

    Thanks, devblog. You’re awesome!!

The topic ‘Missing Header Blog Title in IE, But Not FF’ is closed to new replies.