Why is background 1 pixel off in Firefox?

Okay, this one really stumped me. My non-repeating, centered content background was shifted one pixel to the left in Firefox, but looked correct in Safari and Internet Explorer. Something that looks right in Safari (the most compliant browser) and Internet Explorer (no comment) … hmmm. This was more perplexing than the usual randomness of IE’s bugs. After checking everything from floats to margins, I came across this post:

http://wordpress.org/support/topic/246908

The solution: move the css background-image from the body tag into a container, like the content wrapper. I would have done this initially by instinct, but since I’m using a CMS template, most of the layout was already done for me. Apparently, the body tag in Firefox is shifted one pixel to the left, and styling it with a background image results in that image being shifted also.

This entry was posted in Browsers, CSS and tagged , , . Bookmark the permalink.

One Response to Why is background 1 pixel off in Firefox?

  1. Chris Jones says:

    Thanks for this, you’ve saved me! I’ve battled through all the css minefields to finally finish only to see my top and bottom backgrounds one pixel off. Very frustrating.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>