Header Image 1 pixel off in IE

  • Resolved mkgago

    (@mkgago)


    19 years, 10 months 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: https://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.

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

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

    Thread Starter mkgago

    (@mkgago)

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

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

    Then lose them ??

    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
    https://blog.davidfriedberg.com

    Thread Starter mkgago

    (@mkgago)

    Thanks for the help, guys.

    David, that’s very useful info–thanks. I like your blog design!

    Thread Starter mkgago

    (@mkgago)

    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…

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

    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 */

    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;

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Header Image 1 pixel off in IE’ is closed to new replies.