How to fix the broken capital W in Internet Explorer

Here's one that only a web designer anorak could come up with.

If you're interested in web design professionally, you'll know that the different browsers operate slightly differently. It's much better than it used to be, as the standards defined by organisations like WC3 have been largely adopted.

This little bug will seem very obscure, but it occurs often and sometimes on very professionally designed web sites. If a capital W is the first character on a line, IE will render it incorrectly under some circumstances. This is what happens

See how the left leg of the W has been lost? So, what causes this?

As we already said, a certain set of circumstances have to exist. If the first letter in a block is a capital 'W', the font is Arial and the font size is 11px, the error will occur in IE. It doesn't matter whether the block is floated or in a <div>.

Sounds an unlikely mix? Not at all. You will often see it on About Us pages where the company are using lots of sentences like "We were the first company to ......." etc. Try it yourself. Just put this code into a test page and look at it in IE.

<div style="font-family:Arial; font-size:11px; ">
We are one of the ...
</div> 

So how do you fix it? Well, we could be facetious and say 'use Firefox', but the easiest way is to use a different font or different font size. However, often these things only pop up after you have competed your design and changing fonts etc would break or screw up your design.

So what we do is simply put a 1 pixel padding on the floated block using code like this:

<div style="font-family:Arial; font-size:11px; padding-left:1px;">
We are one of the ...
</div>

Yes, it's a hack but it works and could save your hours of redesign and angst.