Fun with browsers and WordPress

Apr 30, 2010 @ 20:40

It has been one of those days. Somebody reported to me last night that the theme of our <a href=”http://www.igourmand.com/eatdrink/”>food and wine blog</a> did not display the first photo of any page correctly. The first image appeared after a huge space. The problem only happened with Internet Explorer and everything was fine with Firefox. Thus became the quest early this morning at 8am and I started tracking the problem.

I first thought that it was some “Div” problem as the theme used was one that I had made over 5 years ago. I recently rewrote it to change the look and then I rewrote it again last week to bring it into line with the current WordPress theme architecture. I had yet to polish it and finish formatting it and commenting it properly, so my logical thought was it was just some error in one of the PHP files of the theme. I even remembered checking it with various browsers just last week to make sure there was not such a problem, but since I have been doing small incremental update maybe some little error slipped in and I did not catch it.

I first checked the source code in the browser to see if I could find something wrong there. I used a few automated HTML formatter and the results were dismal. If somebody has a good HTML formatter that actually works to recommend, please let me know.

I ended up formatting everything by hand and after reviewing the code found out that there was absolutely nothing obviously wrong with it, and nothing that would explain the discrepancy between Firefox and IE. I had a hunch that the problem might be with the sidebar code, so I disabled it and low and behold the huge space before the first image on a page disappeared. Thus my hunch was right.

I then re-enabled each section of the sidebar one after another until the problem reappeared and finally found that the problem was with the image links I added a few days ago in the sidebar. There is absolutely no reason that IE should behave this way, except that it does not interpret the CSS properly. There is plenty of space for both the sidebar image links and the image in the post, and even if I resized the image in the post to a smaller size the problem continued.

I then starting fine-tuning the CSS and with just a few minor changes of around 15 pixels in one section everything popped back together as it should. I guess that IE is just very bad at properly following the CSS and placing elements on the screen.

Once that was done I decided that since I was in the middle of doing a lot of things with the theme, I should finish it properly. I spent the rest of the day properly formatting the code, changing deprecated WordPress functions to their new versions, profusely commenting the theme so the next time I need to modify things I can quickly find what I am looking for, doing some minor cosmetic changes to the theme, and generally improved its function and look. I still want to spend a bit of time beautifying things, but now it will be a much simpler job after the work that was done today.

What started as what I thought would be a simple job finding a faulty line of code, ended up a day of detective work. The nice thing is that I learned a lot dissecting the more recent template format of WordPress as I had not digged in its depths since version 1.5. It is much more flexible and powerful now and I will go to bed much less stupid tonight after a great day learning new things about the inner works of WordPress. I’m just glad that the work was for myself as I would not have like to explain the reason to justify a full day a work simply to move a picture up in a blog to a client.

Don Luc