CSS inline-block on IE6 and IE7

The CSS display property can be set to "inline-block":

inline-block

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

This is useful for all sorts of stuff including displaying inline a row of images and captions in the same block , or as a container for a dropdown menu. But older browsers, notably Firefox 2 and Internet Explorer 6 and 7, do not support it. See the Mozilla Webdev blog for an explanation and fix.

In summary you can add "zoom:1; *display:inline" to trigger haslayout for IE  and exploit the "*" CSS hack to make the thing inline.

But if you look at Quirksmode's always helpful compatibility page, you'll see that "IE 6/7 accepts the value only on elements with a natural display: inline."

So if you are not worried about Firefox 2 (anyone still using that? why?)  you can simply make the inline-block container a span instead of a div and not worry about any hacks for Internet Explorer.

The trouble with hacks is you can never be sure they are proof against future browser releases.

What to do with a brand new Windows PC

1. Install Linux Mint, taking the "Use entire disk" option.
   All your Windows problems and viruses will disappear.

OK, though this is good advice for most casual users, it's not always practical. I need a Windows 7 machine so that I can test websites in Internet Explorer 9, for instance. Other people have to run business software that's Windows only - although you might be able to run it under Wine.

So, if you really must have Windows...

1. Make sure it's at least Windows 7. Windows XP is an overpatched relic and Vista was only ever slightly less smelly and infected than an open sewer.
2. Delete all the bloatware the manufacturer put on there. Likely candidates include:
   - Trial anti-virus software that wants you pay after 30 days
   - Trial Microsoft Office software - there's no need to pay for commercial quality office applications
   - Free games, that probably cease being free after a month, or x plays
   - Proprietary cloud services  for backup or additional storage
   Contol Panel>Uninstall applications is your friend.
3. Install Google Pack. This will give you a whole bunch of useful stuff in one go, including free and sensible replacements for the stuff you just removed. Just take your pick from the list.
   Note that you don't need more than one anti-virus product, if in doubt pick Avast.
4. If you installed Avast at step 3, register it right now.
5. If you are a serious wordsmith or spreadsheet user, download and  install Libre Office.
   This will let you read and write Microsoft Office documents so you can exchange files with all those 20th century throwbacks who still imagine it's a good idea to mail around bloated Word documents or vast Excel spreadsheets. (Try and persuade them to share using Google Docs, it will save duplication, bandwidth and time)
   Libre Office is the worthy descendent of  OpenOffice.org that has already extended with some useful features and is not bound up in Oracle's pursestrings. It will have all the features you need, is well documented and as easy to use as anything.

Now you have a sensible PC.

execCommand browser compatibility - it's crap

Modern browsers allow you to apply commands to format HTML in a contenteditable element, or an iframe with designmode set on. This functionality enables javascript rich text editors like CKEditor, TinyMCE or Whizzywig. 

This is the execCommand interface, common to Internet Explorer , Firefox, Chrome, Safari or Opera. Except that it's not common because they all generate different HTML in response to these commands.

There's a test at http://www.quirksmode.org/dom/execCommand/  which I have found very useful for seeing how each browser mangles the HTML - even though it has bugs itself! See also the compatibility table, which would be more helpful if it told you what HTML was produced by each browser.

None of them are entirely without problems but I think there's a clear winner. 

For example, issuing a "bold" command on a text selection gives:

• <b>   in Chrome 8 and Safari 4.1 (b is NOT a deprecated tag, contrary to what some say)
• <STRONG>  in IE8 (yes, IE makes all tags UPPERCASE, so not XML compliant)
• <strong>  in Opera 11 (preferred by some as more semantic)
• <span style="font-weight: bold;">  in Firefox 3.6 (but you can styleWithCSS=false to get <b>)

Issuing an "indent" command on a paragraph gives:

• <blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"> in Chrome 8 and Safari 4.1 (!!!)
• <BLOCKQUOTE style="MARGIN-RIGHT: 0px" dir=ltr> in IE8 (doesn't even quote all the attributes!)
• <blockquote>  in Opera 11
• <p style="margin-left: 40px;"> in Firefox 3.6 

So Opera 11 looks like the winner on generating HTML to web standards. The others are all an unholy mess. Internet Explorer's output frequently will not validate. Chrome and Safari insert unnecessary classes and, together with Firefox, use inline styles which will trample all over your carefully crafted stylesheet rules.

Blogs and Pages

Wordpress is blogging software but you can add and edit static pages and use it as a CMS.
According to Blogger Buzz, you can add pages (up to 10?) in Blogger too, but I have not tried this yet.

In Whizzy, everything is a page. But if you could add a tag/label/category/list (pick a name) then you could organise pages in lists. So you can make a page list other pages in a tag/label/category/list: a simple list of links is a menu, a blog is the same list with the page content included, perhaps with just a summary and perhaps with a limited number.

Other features of blogs:

• syndication via RSS or Atom - also generated from the tag/label/category/list
• comments - any Whizzy page can have comments up to commentlimit, perhgaps using Disqus

Whizzywig 2011

I am working on new version of Whizzywig for (early) 2011. It will certainly be re-engineered but will probably not preserve all the interfaces of the current Whizzywig version(61). It will

• use current techniques, best practice and technology
• be smaller ,lighter
• minimize the differences in output from different browsers
• simplify the toolbar whilst at the same time adding more features
• provide a simple means of extending to add your own controls, or even replace the entire toolbar with your own

The current version will remain available for those of you who have it nailed in to websites and applications.
Here's what I'm planning:

Paragraph:NormalHeading 1 (big)Heading 2Heading 3Heading 4 (small)• Bullet list1. Number list→ Blockquote← Unblockquote Character:BigSmallCode (typewriter)StrikethroughSubscriptSuperscriptUnderlineRemove Formatting 

Note: the above buttons don't do anything! They just illustrate what the new toolbar may look like!

1. Whizzywig will have it's own namespace. It won't have global variables that may clash with other javascript that may co-exist on the same page.
   That in turn means that if you have customised your Whizzywig and used the existing global variables (e.g. sels, cssFile) then you'll have change your code to use the new version.
2. The editor will be a contenteditable div, not an iframe. The contenteditable attribute has been in Internet Explorer since Adam was a boy and is in the W3C HTML 5 spec. It is deployed in all modern Class A browsers but won't work in older versions like Firefox 2.
   Using contenteditable has 2 major advantages: it allows the code to be simpler and means that the editor will inherit all the CSS styles of the surrounding page. It will be much more likely that What You See IS What You Get. In most cases, you won't need the cssFile setting any more.
3. The editor will have a very small and lightweight core: aiming for about half the size of the current Whizzywig version.  It won't rely on any other files, not even an image sprite for the toolbar. This will make it very fast and simple to deploy.
4. The font controls won't be on the toolbar by default: in the most common use case of creating HTML fragments to embed in a website, the output will conform to the websites styles as per the CSS rules. Font controls (Font size, Font family, color)  will be available as an extension.
5. There will be new controls to format Paragraphs (replacing the current [Choose style] pulldown) and Characters. The Character pulldown will introduce big, small, subscript, superscript, underline and remove format.
6. There will be a new default control to embed HTML or text. This means you can add that YouTube video or widget code without having to resort to Source code view. You can take the Source button off the toolbar for most implementations which will be a lot safer. If you paste in text from Word, it will strip the HTML formatting but preserve the paragraphs. If you paste in a chunk of plain text, it will add paragraph tags appropriately.
7. There will be context sensitive buttons for Left [⇐] and Right[⇒].
   - If you select an image and click [⇒] it will float the image to the right of the text.
   - If you are in a list or blockquote it will indent the current item.
   - If you are in a text block it will align it to the right.
8. It will provide more control over the output, making it possible to exclude tags, or write your own output generator (e.g. for BBcode or Textile). The default output will be efficient, valid xhtml. "Efficient" means no nested span tags to provide multiple formatting like color, font and italic.
9. Extensions will be available for Font selection, Color selection, Tables, Special Characters.
10. The editor will keep the textarea in sync after each change - no need to call syncTextarea.
11. Independently there will be a new File/Image Manager, with upload.

Help me by commenting below, or by clicking