How to align a header image in other web browsers using Internet Explorer 7

This tutorial does not include the solution for fixing the alignment of the header image in Firefox. That was a separate issue when I made this tutorial but it has since been solved. The solution for Firefox is at the very bottom of this blog post, which I discovered the next day. Please still follow all the instructions to this tutorial of the written version below, and then after that add the extra line of code to your template to position the header to the left in Firefox.

This tutorial is about, firstly, using your own header image that you made yourself which already has your blog's title on it as well as a brief description of what your blog is about. Secondly, your web browser is Internet Explorer 7. And thirdly, you want your blog to look the same in Google Chrome and Firefox as it does in IE7. This tutorial solves the problem of a misaligned header image in Google Chrome and Firefox web browsers without affecting the look of your blog in IE7.

I am no web developer genius, in fact my knowledge of most css/javascript/html codes are still pretty limited. But I am driven to learn how to fix certain problems when they arise, and that is where I get my knowledge from. That, and the desire to solve each problem as it surfaces.

This tutorial displays my lack of understanding about css/javascript/and html codes but it also displays my ability to learn and I eventually solve the problem at hand. I am only human after all but I have a keen sense of ambition! I do not quit easily on problems.

Here is the solution below:

Firstly, you have to find the code that refers to the .header-inner in your template's code.  It will be near the top of the template's code, usually right after the " .body { " code. You simply add the following line of code to that section:

text-align: center;

What a wonderful bit of code that is! If you do not have a .header-inner { section in your template's code, simply add this code to your template in the css header section:

.header-inner .Header .titlewrapper {
padding: 22px;
}
.header-inner .Header .descriptionwrapper {
padding: 0;
}

Then add the text-align: center; line of code between the two brackets, on a separate line, and click on "save template". Not sure what to add? It will look exactly like this:

.header-inner .Header .titlewrapper {  
text-align: center; 
padding: 22px;
}
.header-inner .Header .descriptionwrapper {  
padding: 0;
}

After that, go to the "Page Elements" section and click on the edit link that is on your "HEADER". Leave your header image where it is - do not remove it. Change the title of your blog to a word or two that will match the original title.

Basically, with your header background image you add the title of your blog to it, and then when you add a new name for your blog in the edit section of your header, you carry on with the blog's title by putting a word or two at the end of it. The end result will be the header image title and the original blog title will make a complete sentence.

But, don't save the changes just yet. The next thing you have to do is delete the blog description altogether. Yes, DELETE IT. Then set your header image to "BEHIND THE TITLE AND DESCRIPTION". Once you have done that you can now click on "save" and the header image is aligned perfectly in all three web browsers. That's all there is to it really.

10th March 2011: UNFORTUNATELY, this tutorial above only fixed the problem with Google Chrome. The header was still aligned to the right in Firefox when I checked it out the next day. I finally fixed the problem for Firefox, so here is the solution for that problem:

On top of what you've done above, add the following line of code to your .header-outer { section to fix the problem in the Firefox web browser:  

border: 5px solid #000000;

Of course, you can choose any colour for the border that you like. In the line above "#000000" = black. For some reason by adding a border to the header image, in Firefox, the header background image is realigned to the far left instead of positioned to the right of your blog. All I know is it works!