Here's the deal:

Site has no alignment issues on my home computer in IE or Mozilla. Running 2 19" CRT displays at 1024x768, one older one new. Everything is peachy.

Go to work and make some additions on my laptop with a 15" LCD display and check the site and it displays fine in IE but on Mozilla, the header images and the footer lines are shifted 1 pixel to the right, which covers my bg image and generally irks me. I can set the margin of the respective divs to -1, but then it breaks in IE.

I figure I did something wrong in my CSS, so I reload a fresh copy from the night before. Same problem.

Come home and check it on the CRT's and it looks fine. No alignment issue in IE or Mozilla.

So, to recap:
Fine in Mozilla and IE on my CRT displays @ 1024x768.
Fine in IE, but 1px off in Mozilla on my laptop display @1024x768.
It also is shifted in Safari on a 14" iBook, same as Mozilla. I assume the resolution is 1024x768 too.

link to page:
http://www.vision-tech.net/tsm/index.asp

link to css:
http://www.vision-tech.net/tsm/base.css

It seems pretty random, so I may just chalk this up as being a quirk and live with it. If it displays fine in IE and Mozilla, for the most part, I think I have covered the bases as best I can but I still want to strive for the correct positioning across the board :)

Thanks in advance and good luck!

*edit*
One other thing. The site is valid XHTML 1.0 strict and CSS is valid too.

Another edit:
Alignment is fine in Safari on iBook, but it breaks in Mozilla.

I just saw this, and I'm off to bed, but I'll take that challenge tomorrow morning ;)

OK, here's the issue. It actually has nothing to do with code and everything to do with image dimensions.

You have a background image which is 750 pixels with tiled down the center of the page. The width is an even number - this is important.

You have items residing inside that space set to 725 pixels. This is an odd number.

When you center an object on your page that is an even number of pixels wide, how can it truly center itself if the browser viewport area is an odd number of pixels wide? It can't. At this point, the browser has to jog the image one pixel to the right or left - it has no choice. This is because the central point in the image is between two pixels.

Now, because the stuff inside that area is an odd number of pixels wide, the browser doesn't have to jog it to keep it centered. This is because the central point is a particular pixel, not an area between two.

So, the browser might choose the right point to place the images, and everything works out well. The browser might choose the wrong place. Or the browser might shuffle it back and forth, not able to make up its mind.

Now that I think about it, it's possible I didn't explain this exactly right. I might have mixed up my evens and odds. But the concept I've presented should be correct. So in theory, if the background is 750px wide, the content area should be 726px (or 730 or 720 or whatever) and you'll need to make the appropriate visual adjustment for this.

To see the problem in action, open what you have now and slowly expand and contract the browser window. You'll see the design jump in and out of alignment over and over.

HTH! :)

Interesting, I'll have to test this out and report back to you. I thought for sure it was a browser quirk. Not because I thought I couldn't make a mistake, but rather the way it presented itself. Thanks for your help.

please don't double post ;)

good one the_pm, it does well explain the problem. seems like i've to consider the width whilst designing sites. :)