Comments on: CSS IE one pixel image offset hack

By: jade cloward

jade cloward — Mon, 02 Apr 2012 16:05:45 +0000

Thanks! This fixes IE issue.

Note: push left or right.
margin-left:1px} <= for IE
margin-right:1px} <= for IE

———————
body {margin:0; padding:0; font-family:etc;
background: #fff url('bk.jpg') center repeat-y;
margin-left:1px} <= for IE
———————

Never had this issue until today.
Thanks.

By: Diane Vigil

Diane Vigil — Thu, 09 Dec 2010 20:10:31 +0000

True. On the other hand, I'd think it would depend on the size of your background image ... if it's not just a few K in size, then you may be requiring people to download a huge image just to get your background straight. But it's a solution. On the other hand, paraphrasing what I said above: if you do not have to split up the header image, then it's best to ensure that the header image is an even number of pixels in width … that is, 900px rather than 931px. This tip may save you from unnecessary craziness.

By: Kevin Estep

Kevin Estep — Thu, 09 Dec 2010 15:38:10 +0000

Here is another fix for you that is even simpler. If you make the image 3000 pixels wide (too wide for any monitor) and put the bg image in the center of it then it wont jump around with the resizing of the browser. The background image is actually floating when the browser window is wider than the background image itself. So if you make it way too wide then it will not float because you cannot reach the width of the image with the browser.

By: Diane Vigil

Diane Vigil — Fri, 23 Oct 2009 02:22:05 +0000

You're very welcome, Mike. :)

By: Mike

Mike — Fri, 23 Oct 2009 01:44:45 +0000

GOD BLESS YOU!!! IT WORKED!!!

By: David McNee

David McNee — Thu, 11 Sep 2008 15:30:19 +0000

Hi Diane
Managed to get the fix to work for IE but everything shifted 1 px to the right in other browsers. Fixed the problem though using a separate style sheet for IE.
Cheers
David

By: Diane Vigil

Diane Vigil — Thu, 11 Sep 2008 01:01:56 +0000

Excellent. Did that work for you?

By the way, I always do this:

body {margin:0; padding:0}

By: David McNee

David McNee — Thu, 11 Sep 2008 00:49:13 +0000

Thanks for replying Diane.

I've got the vertical border image at 798px and the wide images are at 796px.

"html>body {margin:0}

By: Diane Vigil

Diane Vigil — Wed, 10 Sep 2008 18:39:07 +0000

Hi David. I haven't looked closely at your code, but I would take a look at your widths on the wide images and the borders.

In essence, if an image is 800px, then the border around the whole thing probably ought to be 802px.

By: David McNee

David McNee — Wed, 10 Sep 2008 13:31:21 +0000

Hi Diane, I tried the fix but it doesn't seem to work for me. Could you have a look and see if i'm doing something wrong.

http://www.neilstontrust.co.uk/home.html

Thanks