WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Header Image 1 pixel off in IE (11 posts)

  1. mkgago
    Member
    Posted 9 years ago #

    I'm having a strange problem -- the image in my header appears to be one pixel off in IE. It looks okay in Firefox.

    here's the link: http://www.tatteredcoat.com

    Anyone have any ideas? It seems to load okay before the entire page loads, but then, when it does, it shifts over.

    I tested out a few theories; the problem is *not* with the amazon or google ads in the sidebar...

    Here is the css for my header (derived from podz):

    #header {
    background-image: url('images/personalheader.gif');
    background-repeat: no-repeat;
    border-left: solid 1px #e7e7e7;
    border-right: solid 1px #e7e7e7;
    margin: 0;
    height: 200px;
    width: 760px;
    }

    #headerimg {
    margin: 0;
    height: 200px;
    width: 100%;
    }

    #header a {
    display:block;
    height:100%;
    text-indent:-500em;
    text-decoration:none;
    }

    and, in header.php:

    <div id="header">
    <div id="headerimg">
    <h1> </h1>
    <div class="invisible">a paltry thing</div>
    </div>
    </div>

    Anyone know what's going on?

    Thanks in advance for your help.

  2. Root
    Member
    Posted 9 years ago #

    Its the left and right borders that are reducingthe available width by 2px.

  3. mkgago
    Member
    Posted 9 years ago #

    that's interesting, Root. Which borders are you talking about, though?

  4. Mark (podz)
    Support Maven
    Posted 9 years ago #

    The ones above - left/right.
    Change them to 5px and see the effect.

    Then lose them :)

  5. metabold
    Member
    Posted 9 years ago #

    IE implies the padding if you don't remove it.

    Also your using:

    margin: 0 !important; which IE 5.5 and 6 ingore. Make sure you padding is set to 0px too.

    Since your setting your margin to zero just code:

    margin: 0px;

    You also have now width set for the page div.
    Set the width to 758px as well.

    David
    http://blog.davidfriedberg.com

  6. mkgago
    Member
    Posted 9 years ago #

    Thanks for the help, guys.

    David, that's very useful info--thanks. I like your blog design!

  7. mkgago
    Member
    Posted 9 years ago #

    just to update this post: I ended up not playing with the CSS further. Instead, I just edited the image itself, and moved it a pixel over. Who knows--the original error may have occured when I made the image in the beginning.

    At any rate, the CSS I'm now using is the default:
    #header {
    padding: 0;
    margin: 0 auto;
    height: 200px;
    width: 100%;
    background-color: #73a0c5;
    }

    #headerimg {
    margin: 0;
    height: 200px;
    width: 100%;
    }

    h1 {
    padding-top: 5px;
    margin: 0;
    }

    .invisible {
    display: none;
    }

    and the header.php looks like this:

    <div id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
    <div id="headerimg"><h1 class="invisible">The Tattered Coat</h1>
    <div class="invisible">a paltry thing</div>
    </div>
    </div>

    The reason I wanted to include the title of the site in an h1 is that I believe that some search engines place importance on the text in h1 tags...

  8. Crops
    Member
    Posted 9 years ago #

    From what I see when I visit, your header is still off in IE

  9. metabold
    Member
    Posted 8 years ago #

    It's been a long time. But you may have to use a negative number for IE 5.5 to make it look correct.

    margin: 0 important; /* Firefox and Safari */
    margin: -2; /* IE 5.5 */

  10. lynx
    Member
    Posted 8 years ago #

    Hi! I had the same problem with IE an FF. The solution with "important" needs an "!".

    Should look like this:

    margin: 0 !important; margin: 0 0 0 1px;

  11. metabold
    Member
    Posted 8 years ago #

    Sorry about that I should check my typing a little more closly next time.

Topic Closed

This topic has been closed to new replies.

About this Topic