WordPress Firefox and Position: Relative CSS problems

When creating or editing the content of a WordPress Cascading Style Sheet (CSS), many people neglect to take the time to check their work using multiple browsers, IE. Opera, Firefox, Internet Explorer, Navigator etc. Unlike Internet Explorer and many of the other popular browsers, Firefox is one of the only browsers that properly use some commonly implemented CSS property values. This can propose a problem when viewing your work with multiple browsers.

One such property value is the position: relative; CSS value. If you use the position: relative value especially with with a percentage value IE. width:20%; and then proceed to view your work with Firefox as opposed to the other common browsers, your likely to quickly become disappointed with the results.

The fix is two fold. You can usually correct the problem by simply replacing the percentage % value with a fixed value such as 200px. The other option which is how I typically do it, is to change all position: relative; entries to position: absolute; and change all other values accordingly.