Header Image 1 pixel off in IE

Resolved mkgago
(@mkgago)

18 years, 11 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: 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.

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

Root
(@root)

18 years, 11 months ago

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

Thread Starter mkgago
(@mkgago)

18 years, 11 months ago

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

Mark (podz)
(@podz)

18 years, 11 months ago

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

Then lose them 🙂

metabold
(@metabold)

18 years, 11 months 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

Thread Starter mkgago
(@mkgago)

18 years, 11 months ago

Thanks for the help, guys.

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

Thread Starter mkgago
(@mkgago)

18 years, 11 months 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…

crops
(@crops)

18 years, 11 months ago

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

metabold
(@metabold)

18 years, 8 months 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 */

lynx
(@lynx)

18 years, 4 months 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;

metabold
(@metabold)

18 years, 4 months ago

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