Images shift 1px to the left in IE?

I’m not sure why, but it seems that (in Internet Explorer only) all of the images on my webpage display 1 pixel to the left than what they do in every other browser. Safari and Mozilla on Mac displays fine, and Mozilla on PC displays fine. It isn’t really a problem except where I have overlapping images against the background edges that need to line up. Take a look:

http://www.fretlight.com/index.html

In particular, look at the image of the blue guitar on the left and the bottom graphic of the page, (the container graphic rounding off the bottom of the white space). They both are 1 pixel to the right on Safari because my client is only concerned with how it displays in Internet Explorer (which is what he uses.) So I deliberately put things 1 pixel to the right so that they would display correctly in IE, but they look bad in every other browser. I’ve tested this is both IE6 and IE7. Same problem.

I began to think that maybe it’s not the images, but the background gif that’s shifting. But either way, I’m clueless as to how to fix it.

Any ideas? Thanks.

quote

Does anyone else experience something like this? I’ve been testing on a lot of different machines and browsers, all with the same results. Internet Explorer is shifting my graphics over the left by 1px. I tried changing the page dimensions and even the background graphic dimensions by 1 px, thinking it may be an odd number/even number pixel thing. No avail.

quote

If I remember correctly, older versions of explorer had a 1px around the window edge that it could not display into leaving a small gap

It that what you’re experiencing? What version of Explorer is having problems?

On 13 Nov 2007, at 15:12, Aaron wrote:

Internet Explorer is shifting my graphics over the left by 1px.

David Owen Printline Advertising :: Freeway Friendly Web hosting and Domains :: http://www.printlineadvertising.co.uk/freeway/

quote

I thought there was a similar discussion recently about this. Something to do with table-based layout… and Freeway inserting GIF shims?

As should everyone here asking for help, you should let us know which version of Freeway you’re using — that could be important. Also, the version of IE you are experiencing problems with… 7, 6, 5.5, or all the above.

It is really hard (for me) to look at table based layouts and understand what is going on. In Mac Safari (2) and Firefox (2) I see the bottom edge shifted left 1 pixel and the same in the upper left side. I don’t know if that’s your problem or resulting from your compensating for IE.

On Nov 13, 2007 7:12 AM, Aaron <email@hidden> wrote:

Does anyone else experience something like this? I’ve been testing on a lot of different machines and browsers, all with the same results. Internet Explorer is shifting my graphics over the left by 1px. I tried changing the page dimensions and even the background graphic dimensions by 1 px, thinking it may be an odd number/even number pixel thing. No avail.

Ernie Simpson — Freeway 4 Pro User — http://www.thebigerns.com/freeway/

quote

Sometime around 13/11/07 (at 10:12 -0500) Aaron said:

Does anyone else experience something like this? I’ve been testing on a lot of different machines and browsers, all with the same results. Internet Explorer is shifting my graphics over the left by 1px.

Do you have an address that shows the page in question?

Also, is this a centered page? It could be to do with differences in the way different browsers handle the rounding aspect of positioning items when the window is 900px wide vs. 901px wide (for example).

k

quote

Keith — here’s the original post.

On Nov 8, 2007 12:35 PM, Aaron <email@hidden> wrote:

I’m not sure why, but it seems that (in Internet Explorer only) all of the images on my webpage display 1 pixel to the left than what they do in every other browser. Safari and Mozilla on Mac displays fine, and Mozilla on PC displays fine. It isn’t really a problem except where I have overlapping images against the background edges that need to line up. Take a look:

http://www.fretlight.com/index.html

In particular, look at the image of the blue guitar on the left and the bottom graphic of the page, (the container graphic rounding off the bottom of the white space). They both are 1 pixel to the right on Safari because my client is only concerned with how it displays in Internet Explorer (which is what he uses.) So I deliberately put things 1 pixel to the right so that they would display correctly in IE, but they look bad in every other browser. I’ve tested this is both IE6 and IE7. Same problem.

I began to think that maybe it’s not the images, but the background gif that’s shifting. But either way, I’m clueless as to how to fix it.

Any ideas? Thanks.

Ernie Simpson — Freeway 4 Pro User — http://www.thebigerns.com/freeway/

quote

As should everyone here asking for help, you should let us know which version of Freeway you’re using — that could be important. Also, the version of IE you are experiencing problems with… 7, 6, 5.5, or all the above.

It is really hard (for me) to look at table based layouts and understand what is going on. In Mac Safari (2) and Firefox (2) I see the bottom edge shifted left 1 pixel and the same in the upper left side. I don’t know if that’s your problem or resulting from your compensating for IE.

Version of Freeway - 4.4 Version of Internet Explorer experiencing this 1px shift: Personally tested IE6 and IE7. Both show the same 1 px shift.

Yes, also the webpage is aligned “Center”. The webpage has a width of “800px”. I decided to try something and I think I resolved the issue: My original background graphic was exactly 800px wide (the same width as the page) so I went in to Photoshop and shaved 1px off the background image, so that it is now 799px. That seemed to do the trick. Everything is lining up in IE, Safari and Firefox. I guess this was just an issue of browsers handling the “Center” alignment differently.

Thanks to all.

quote