Header Floats Left in IE

  • I have just uploaded my own header image and everything looks fine using Google Chrome but in IE the header floats to the left. Is there something I am doing wrong? Any help would be greatly appreciated.

    Here are the CSS details:

    /* Header */

    #header-wrap {
    background: url(images/header-repeat.jpg) repeat-x center top;
    }

    #header {
    height: 216px;
    background: url(images/header.jpg) no-repeat center;
    }

    .no-sidebar div #header {
    background-image: url(images/header-no-sidebar.jpg);
    }

    .double-right-sidebar div #header {
    background-image: url(images/header-double-sidebar.jpg);
    }

    #header div {
    width: 800px;
    margin: 0 auto;
    }

    .double-right-sidebar #header div {
    width: 947px;
    }

    #header h1 {
    font: 2.2em/169px “Georgia”, “Baskerville”, serif;
    margin: 0;
    }

    #header h1 a {
    color: #d3d3d3;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    text-shadow: #000 0 1px 2px;
    float: left;
    }

Viewing 12 replies - 1 through 12 (of 12 total)

  • Try using ‘fixed’ as background-attachment.

    Peter

    Thread Starter scruffysaint

    (@scruffysaint)

    Thanks for the help, unfortunately, I’m a total newbie at this, so could you advise where I need to make the changes. Thanks again.

    Wayne

    Apologies. Change this:

    #header {
height: 216px;
background: url(images/header.jpg) no-repeat center;
}

    into this:

    #header {
height: 216px;
background: url(images/header.jpg) no-repeat center;
background-attachment: fixed;
}

    Peter

    Thread Starter scruffysaint

    (@scruffysaint)

    Thanks Peter

    I’ve added the extra line

    #header {
    height: 216px;
    background: url(images/header.jpg) no-repeat center;
    background-attachment: fixed;
    }

    Unfortunately, it still floats to the left in IE. Again, please excuse my ignorance but does it matter that the background-attachment line isn’t indented like the other coding? I can’t seem to get it to the same place as the other lines (as per above).

    Wayne

    Thread Starter scruffysaint

    (@scruffysaint)

    Some extra info which may add more light to the situation. I am using the Elegant Grunge theme and this allows me to upload my own PNG file which is then placed over the top of the existing header. I’m not sure if this makes any difference.

    Thanks

    please excuse my ignorance but does it matter that the background-attachment line isn’t indented like the other coding?

    Makes absolutely no difference.

    What’s the url to your site?

    Peter

    Thread Starter scruffysaint

    (@scruffysaint)

    https://rowe5916.c3.cmdwebsites.com/blog/

    Thread Starter scruffysaint

    (@scruffysaint)

    I’ve just noticed a Compatability View button in IE which corrects the error. It’d be nice if I could sort this out in the coding but it’s not the end of the world if I can’t.

    Thanks

    Compatibility View works, but do all your viewers have it ticked on? You can use a metatag to force it for your site:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    I see this was an old post so I hope someone still sees it ??

    QUESTION: where does the metatag to force compatibility go? This theme (I’m also using Elegant Grunge) has two .css files: “style.css” and “ie.css” file. AND, pardon my ignorance, do you just place it at the bottom of the file or does it have to go into a particular spot?

    Scratch that. I just went and put it into the the top of the header.php just one line above <title> and Presto! problem solved! “-)

    Moderator t-p

    (@t-p)

    hi songdogtech,

    You can use a metatag to force it for your site:
    <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

    what about IE less than 7? Does one need to add separate tag for each IE version?

    Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Header Floats Left in IE’ is closed to new replies.