Getting CSS rules to work across all browsers is a continuous fight. Thankfully, there are workarounds and DHTML methods to correct many of these problems, and if those fail, reluctantly there are hacks available. Unfortunately, it seems I’ve run into a difference of opinion between the browsers, most likely as a result of the W3 Consortium failing (yet again) to be explicit with their standards. The problem is the difference between the way Firefox and Opera interpret the “word-spacing” CSS property versus the way Safari and IE interpret the property. More specifically each browser treats the non-breaking space differently. FF/Opera both respect the non-breaking space and Safari/IE both ignore the space. For example, if the text is “first foo bar last”, FF/Opera would like:
first foo bar last
whereas in Safari/IE the text would appear like:
first foo bar last
Personally, I agree with the FF/Opera developers and feel that the non-breaking space should be respected since I’m explicitly telling the browser that words to either side of the non-breaking space should be treated as a unit. So now I’m going to have to put each phrase in some sort of HTML block and depend on a combination of padding and margins to accomplish the same effect in order for it to be cross-browser compatible.