It seems that I’ve come across my first little hiccup in my little DIY project. The ugly cross-browser compatibility issue has shown itself. Actually, in this case it’s less cross-browser compatibility and more cross-browser consistency.
As I said before in the article introducing the overall plan for Mashed Bits, one of the features that I’d like to include in addition to all the proposed social networking fare is a full-featured blog (or as close to it as I can manage given my DIY mentality). Of course, no blog worth its salt will ask a blogger to type out articles in a simple text box. Text box? Ridiculous. It’s all about the rich text editor.
Really, the problem started when I discovered how difficult Firefox can be with the contentEditable property (You’re only able to apply it to the whole page… really Mr Mozilla?). But that’s not the big problem. Introduce an iframe and you’re good to go on that little . No, the real problem shows up when you try to add formatting to the text within the make-shift text editor.
Just using them as an example, let us look at Google Chrome and Mozilla Firefox. In Chrome (my browser of choice, by the way), if you try to make a selection bold it will surround the text with the <b></b> tags. Firefox will do otherwise. It will, instead, surround the text with the following: <span style=”font-weight: bold;”></span>. To the user they look identical but I’d like some better consistency. Even more, I’d like to not have any in-line styling in my HTML.