Fix missing first letter bug on IE

Actually, this post is going to be my way of being grateful for the fact that I finally discovered how to kill this pesky missing first letter bug. This one had also hit my blog and I really had a hard time trying to figure out how to solve it, much more, figuring out what is causing it.

F.Y.I, it took me almost a week to finally get rid of it. At first, I was trying to go over my template code to try find any code bug. Bad luck strikes and I can’t see the culprit. So I end up doing hard research and some code experiment, which had happily paid off. The solution was so simple that the only challenge (and a tough one at that) was knowing what the process is.

An overview of the problem

The missing first letter bug only exists on Internet Explorer browser. If you tried to view your blog, or website using Mozilla Firefox (for example), you’ll find nothing wrong. My theory is that IE very much follows codes. A proof of this is that when you view a layout code on layout resource sites (those sites where you get codes for layouts) using Internet Explorer, you can’t see the code. Instead of displaying the code, it displays the actual layout itself.

Anyway just as I’ve said, the missing first letter bug is always found in IE. Usually they target headers or post titles and I know how frustrating it can be to find your headers and or post titles always missing with their first letters.

How I fixed it

Because it seems that their’s nothing wrong with the code in my template, I tried to research about it and hope some site might give me an answer. There is one thankfully. If you tried to Google it, you can find the site positioneverything dot com. They had very well pinpointed the problem. Only thing is, they did not clarify how to properly fix it. If you take a look there, you’ll know about four to five ways of getting rid of the bug, but you’ll have a hard time trying to figure out the correct process. At that time, I was getting more and more desperate. So I tried what they said and experimented how to apply their solutions in my template. Out of the five (or maybe four) ways, I became successful with the one involving the padding.

Go to your edit template tab and look for this code involving the main wrapper (note: if the bug is present on your header, go look for the code involving the header). If you are asking why, the main wrapper is where you’ll find your post, including the post title, post text, and post footer. This is where the problem roots and this is where we’re fixing it.

#main-wrapper {
width: 520px;
float: left;
margin:10px 0 0 20px;
padding:0;
word-wrap: break-word;
overflow: hidden;
}

Simply replace the code padding: 0; with

padding-left: 10 px;

Note: you can change 10px to anything you like except 0px.

#main-wrapper {
width: 520px;
float: left;
margin:10px 0 0 20px;
padding-left: 10 px;
word-wrap: break-word;
overflow: hidden;
}

The trick is to make a left padding for your main wrapper (or header). The purpose of this is to make a definite area on your wrapper for your text so that the margin won’t eat up your first letter. That’s how simple the solution is.