Saturday, December 03, 2005  

[Problem solved!]

Yes, the clock and countdown ticker are back. I found the problem and fixed it. The rest of this post is about how I did it, so if you're not into or familar with HTML and CSS, you may not want to read the rest of this entry....

I realised that even without the tickers, IE was still consuming a good amount of CPU cycles when I'm looking at my blog, even more if I'm scrolling. I tried highlighting some of the text, and it was kinda jerky. If everything's fine, you should be able to highlight text effortlessly. At this time, I basically have 5 "panels", width/height and x/y co-ordinates all controlled by CSS. Honestly, CSS is very powerful, and extremely easy for placing content exactly what you want it. In fact, coding this blog became similar to programming since I no longer have to strictly observe sequence, as long as the right code goes into the right panel divisions.

For some reason, IE has a problem when the "panels" get too big. In my previous design, the panel was small so it wasn't much of a problem. With this new design, this main blog panel can get very tall and big depending on the blog content, even though I show only the latest 5 entries. That was what's eating up all the CPU cycles.

So I embarked on a mission to replace the site's layout from using CSS to using HTML Tables. It wasn't that hard, I just used whatever styles I was using previously inline instead. I did have to check up some CSS parameters, but no problems with that, thanks to Google. To most people, the layout looks the same, but under the hood, I've removed all the CSS "panels" except for the one on the right. It's still a panel, but inside a HTML table cell. I had to, otherwise the background colour would extend all the way to the end of the page, instead of ending with it's own content.

The improvements:
  1. Now all screen resolutions from 1024 * 768 and above would be able to view this site quite nicely. If you're using 800 * 600, you'd need to scroll. Can't be helped. Previously, the layout was designed for the 1024 * 768 screens, so even if your resolution was higher, you would still see the site in 1024 * 768 format, with white space on the right.
  2. It should load faster and consume less CPU cycles on IE.
  3. The problem of white spots on dark pictures on longer exists. I thought it was a Blogger bug, but as it turns out, it was due to the CSS.

New problems:

  1. This black border used to be only as tall as the contents using CSS. Now with HTML Tables, the border will be as long as the panel on the right even if the post was short. A little hard to explain, just click on "Read Comments" of any short entry, and you'll see what I mean. All the white space inside the border. When I used CSS, the browser understood that it could "close" the panel as long as all the content has been displayed.

^^^ by Locksley @ 1:59 AM. 0 comments.
[Read Comments] [Post Comments]


[Comments]

[<---Back to Main]
RSS