Treehouse: Grow your CSS skills. Land your dream job.

IE6 Seems to render header twice

  • # March 22, 2009 at 3:43 pm

    I have a strange problem on a web site I’m developing. In FF and IE7 it renders fine but in IE6 it looks like the top border is rendered twice with the header picture also rendered twice causing a 10px problem in IE6. I tried several similar hacks I found searching for a solution, all seem to causing a problem in IE7 without fixing the IE6 problem.

    Here’s what it looks like. The first is as it appears in IE7 and FF, the second in IE6

    Here’s the website it’s at

    I’m attaching the CSS Code.

    Thanks for any insights, it’s frustrating.

    # March 22, 2009 at 4:12 pm

    Don’t have access to windows right now but I would try this:

    #logo {
    background:transparent url(/images/banner1.jpg) no-repeat scroll center bottom;
    border-bottom:1px solid #FFFFFF;
    border-top:10px solid #000000;
    padding:20px 0 0;
    # March 23, 2009 at 10:59 pm

    Thanks for the suggestion but it didn’t change anything, good or bad. IE7 and FF render ok, IE6 still does double border and overlaps. Any other suggestions?

    # March 23, 2009 at 11:58 pm

    Ok we’ll have to do it properly then.

    Remove the 10px solid border from #logo and add it to the body instead. Put #logo inside #page. Place the h2 before #logo but inside page.

    body {
    border-top: 10px solid #000000;
    #logo {
    background:transparent url(/images/banner1.jpg) no-repeat scroll center top;
    border-bottom:1px solid #FFFFFF;
    width: 1020px;
    height: 150px;
    h2 {
    margin: 2px 0;
    text-align: right;
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.