MoonKat Creations

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.

1. Firefox will put a vertical AND horizontal scrollbar on a textarea by default.

To get rid of the horizontal scrolling, use this:

overflow-y: scroll; (or overflow-y: auto if you don’t want your scrollbar to appear if it’s not needed)
overflow-x: hidden;

Not this, as I’ve seen suggested on various blogs:

overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;

I’m not sure what the advantage is to the extra styles, as I’ve seen no difference in rendering.

2. Firefox will not wrap a single word. Use text with spacing for testing. I’ve made the mistake of testing with one long string of keyboard gibberish, and wondered why I could only get horizontal scrolling. Also, if you have your x-scrolling disabled, the string of characters that exceeds the width of the text box will be cut off from view.

Spaces are good

Single string is bad

3. Be sure to set the height of the textarea great enough for the browser to render a scroll icon. If the textarea isn’t tall enough, all you’ll get is a gray box on the right hand side, which is still functional, but not intuitive.

With a specified height

Without a specified height

(more…)