Wednesday, November 5, 2008

my new 3-column layout

those of you who have been following this blog must have noticed that i have adapted a 3-column layout. last weekend i finally had the time to sit down and work on the codes with a little help from how-to and blogger-buster sites i stumbled upon and relying on my limited understanding of CSS and html codes...thanks to that short course on web design for beginners i took from the University of the Philippines-College of Engineering eons ago when the word 'blog' wasn't invented yet.

anyway, it was pretty simple but required a lot of patience. Playing with the Minima template i already have, i added the codes for the new left sidebar, increased the margins of the outer wrapper to give room to the additional column and made a few tweaks here and there until my site looked like this: i was happy. the main post column was at the center and i have 2 sidebars (left and right) to organize my nonsense. i was so proud of myself.

until....

yesterday i opened the desktop in our bedroom and eeeekkkkkk...!...horror of all horrors...! this was how my page appeared: as you can see, the left sidebar was centered and occupied the entire top portion of the screen and i had to scroll down to find the main post and the other sidebar. i thought it was just some temporary glitch so i refreshed the page but nothing changed. the problem? the first image with the correct layout was generated from Mozilla Firefox (my laptop's default browser) while the last two images with the misaligned columns were generated from Internet Explorer which is the desktop-in-our-bedroom's default browser. all these images by the way are cached versions of my site 'coz i was so freaked out with the misaligned columns in IE that i forgot to print the screen before i improved the layout to what it is now. Thank God Google took a snapshot of my old layout.

let me invite you again to the above images. notice how the first image (from Firefox) was properly centered on the screen after i zoomed it out? the last two images from IE, however, magnetized to the left of the screen when i zoomed them out. IE really sucks!

there was no question i had to correct the layout 'coz i know that majority of the surfing population, especially those accessing the internet from public facilities, still use IE. Hey, if you're one of them, make the move, download Firefox now! Anyway, I tried adjusting the margins and paddings but didn't succeed, each failed attempt making me hate IE even more. What's wrong with Internet Explorer? or shall i say what's wrong with these 2 browsers? can't they just agree on the script and make my life easier?

so going back to my problem. by some honest mistake and maybe out of frustration, i mindlessly floated the new 'left-sidebar-wrapper' to the right (think about it: why would you float a LEFT sidebar to the right?) and to my surprise the left sidebar migrated to the extreme right of the page pushing the main column to the left and the other sidebar to the center. hmmm...not bad. i was not sure if that was an acceptable move in the book of codes but who cares, i was happy with how it turned out and with just a few changes in the margins, i came up with a neat layout like this from Firefox:and then i checked IE and got this:nice...isn't it? now all the columns are there except that if you look closely or if you're as OC as me, you would notice that in IE, the columns are not neatly justified, the gaps between the columns are bigger, the search box is wider than the width of the texts below it and the right-most sidebar containing the Feeds widget is positioned a little bit higher than the other columns. oh well, good enough for me. i can live with that.

at least now i can breathe knowing that all my readers can view my site with the new 3-column layout correctly whether they're using Firefox or IE. i suggest that if you also have a blog and you plan to modify your template, it would be worth checking how your new template would appear in both Firefox and IE. but let me insist: download Firefox now. it's safer and works better. i should know. and they're not paying me for it. I was tempted to join their affiliates program to spread the word but all they are offering is a 'chance' to win an exclusive T-shirt and be featured in their website. ugh! thanks but no thanks, i'm spreading the word anyway! :-)

1 comment:

Related Posts Plugin for WordPress, Blogger...