Phantom pixels in CSS

Last weekend I helped get a great new FCC policy blog up called Wireless Unleashed. It's a cool idea about how once regular TV stations go digital, all the unused stuff above channel 13 could be reallocated as a new free wireless spectrum, kind of like a super powerful 802.11b.

Anyway, now that the site is up, I can point out a phantom CSS pixel problem I encountered while doing the layout. I used a basic three colum CSS layout, with some padding in the main content area. My favorite hack is that it's got a background image to make the post area and sidebar fill their space to the bottom (while using an alpha transparent png that degrades nicely in IE for windows). On this one page, the design called for full-width banners, so I put some inline CSS to override the padding in the white area, and to get IE and moz to display the full width banners I had to resort to an image replacement hack.

Now, here's the crazy part. The center column isn't fixed width in CSS even though it's a fixed width layout, and the banners with people's names on them are the full width of that space. If you look carefully, you'll see a pixel or two of white space on the right edge of the banners. In firefox I see one pixel. In IE/Win, I see about 3 px. If you scroll down below the right sidebar to the last banner, you'll see that it's flush and there's no gap at all. The background line between white and orange doesn't bend, but the banners don't appear all the way to the edge when content is on the right. I can't figure out why, and just gave up on trying.

update: stupid me for forgetting there was a 1px margin on the right sidebar. IE still shows a big gap but it's probably its own personal weirdness when calculating page widths.