With the release of Wordpress 2.2, I decided to take advantage of the widgets. That meant I either had to upgrade my current theme, find a new widget-ready theme or make my own. I browsed several of the available options at the Wordpress theme viewer and found nothing that jumped out as “yeah - that’s the one”. That left me doing me own.

I started with the Wordpress default and added my header. That was the easy part. After getting in the navigation bar and modifying the main colors in the CSS I was making great progress. Then I reached a roadblock.

I spent hours today trying to figure out why FireFox was inserting a space between two div elements but Internet Explorer would show the page correctly. There were numerous suggestions I found on various pages and forums; all of which I tried. It wasn’t until I found Paul OB’s article “No Margin For Error” that I discovered I wasn’t the only one who has encountered this problem.

Paul’s article discusses in detail the different CSS defaults for IE and FF. I was surprised to know FireFox sets default margins. That default margin is causing my graphics to have a small white gap between them. I tried using the CSS code to reset the global white space. That did get my navigation graphics to move up and sit just below the header graphics - which is where I want them. But, it also caused all my content to be really goofed up.

I opted to live with the gap in Firefox rather than go back and rewrite all of my articles or track down every piece of CSS that governs my text display. I have tried to adjust the margin settings in CSS for the primary elements named in the header section but haven’t had any luck yet. For now, it can stay like it is.  I am still tweaking the layout and may change the way the whole header thing is setup anyhow.