Site Updates, Layer Positioning Bugs Troubleshooting Guide

Note: If you want to learn how to troubleshoot layer positioning bugs, you can skip to the last part of this post.

Made some changes to the layout a little bit. I'm not keen in changing to a totally new layout, because I kind of like this one so much, as it is very practical. Removed the annoying images in the AdSense around this site. It works really well, but I just felt annoyed with it, so I removed it for the time being. I have also added another column to the sidebar, so I don't have a super-long sidebar in order to fit all the stuffs that I need to. Should be able to see the sidebar's contents without needing to scroll down much. Removed the plane icons on the header, and reduced the big margin on the left to zilch, so that I can have wider space for the postings (since it is already compromised by the wide sidebar).

This blog in IEAs always, every time I changed the layout, it ALWAYS failed on Internet Explorer a.k.a IE. I shouldn't be bothered because I love Firefox, but I pity my readers because still quite a lot of them are using IE. The bug doesn't cause any readability problems, but it made the sidebar once again shift to the bottom, take a look (click on the image to enlarge it) at the screenshot.

Maybe I need to stay at home and fiddle a lot more with the margins. Last time I had this similar problem but I managed to fix it with some margin adjustments, but it took me the whole night.

I am using the Negative Margin approach. If anybody have any solution (hopefully permanent) to my IE Miseries, please let me know!

Small Update @ 14:59 2006.07.11

New Features

Most of the new addons are administrative tools, however, I have two new features for the visitors:

Post subscription - Yes now you can opt to subscribe to any post you like, so if anybody commented on the post, you will get the comments as well!

(Probably) Related Post - Now, a list of possibly related post (based on keywords) is listed down underneath the current open post. Who knows some of them might be handy :)

Small Update @ 00:12 2006.07.12

I got the site working in IE. Some mis-resized image is pushing the sidebar to the left, hence bringing it down. However, now another problem occured. In Firefox, the page seems to scroll to the side, even though when nothing visible is there. I've put borders at all possible DIVs and elements, but I couldn't figure out why the empty space appears.

If anybody can tell me what I did wrong, I would be appreciated. I'll pimp your site!

Small Update @ 00:30 2006.07.12

I've managed to figure out what's the culprit that causes my page to scroll sideways in both Firefox and Opera. It is the header image DIV! I don't know for what ever reason it suddenly decided to have a full 100% width, and with the initial 45px margin I placed on it, results an extra 45px space on the right of the page instead.

How did I finally manage to figure it out? There's a cute trick you can use to troubleshoot your layer and positioning bugs should you couldn't figure it out. At the end of your Style Sheets (CSS) file, place the following line:

CSS:
  1. div, span, table { border: 1px solid red; }

... and then reload your page, you should be seeing something like this:

Layer Troubleshooting
click on the thumbnail above to enlarge the picture

After the quick fix in the CSS, my page finally appears like this:

Done Fixing

Looks okay now isn't it? Don't forget to remove that magical CSS code from your Style Sheets!

Technorati Tags: , , , , , , , , , , , , ,
maharajavideo.com

One Comment:

Ganaesh says:

Am reading this on Mozilla Firefox that I just installed in one of the PCs at the MMU library. :) Booyah!

Fird: Wee!

[Reply]


Leave a Reply