Blogger Templates

As I continue to code CSS & HTML for multiple browsers, I find that if you follow two 'simple' rules, your design will most of the time come out pretty much the same in all browsers.


1.) Never use padding along with width
This is probably the cause of the biggest headaches as IE 6 renders padding incorrectly. To make everything look the same in browsers, you will probably have to do some extra math and use an underscore or star html hack to set the width differently for IE. So it is advisable to never use paddings with width. If you absolutely have to use padding, create another container (div, span, p etc) and set its margins.

2.) Always remember to clear your floats
This is an IE problem that shows up most commonly in Firefox or Opera. Confused? Now let me explain. In IE 6 even when you don't clear your floats, the parent container will still rap around the inner content. However rendered correctly, the parent container would only appear for maybe five pixel at the top of the page and your child container seems to break out of its parent container and extend to the bottom of the page. So in Firefox when you see your parent container appearing only at the top of the page for a few pixel, remember to check if you cleared your floats or not.


Please keep in mind that these are tips for rendering designs the same in different browsers and not tips for how to code CSS. For example with tip number one, if you put a div that is 800 pixels wide with 10 pixels margin all around in a div that is only 800 pixels you will still get an expanded parent div, but at least it shows up the same in all browsers; whereas if you put a div that is 800 pixels wide in a div that is 800 pixels with 10 pixels padding, who knows what's gonna show up.

Now that I have upgraded to Internet Explorer 7, it of course removed Internet Explorer 6. This present yet another problem for browser testing for IE 6. It is not possible to run to versions of Internet Explorer...now wait a minute, here's something interesting, you can download the standalone version of Interenet Explorer 6 here. Simply download the last file, unzip the file and put everything in a folder somewhere and you're good to go.

Because of the standalone IE probably use some functions from the shell, which is integrated with Internet Explorer 7, you can see some of the feature from IE 7 in the standalone such as the little icon for some sites in the address bar. Don't worry though, the standalone still renders webpages incorrectly just as IE 6 does...in this case, that is a good thing.

Like many others, I upgraded to Internet Explorer 7.0 from Internet 7.0 Beta sometimes last week. I didn't give a second thought about it since Firefox (version 2.0 was release a week later), not Internet Explorer was my native browser. Not until yesterday did I get a huge wake up call to do some browser testing to see my sites show up ok in 7.0.

Internet Explorer 6.0 and below are notorious for not conforming at all to the CSS/HTML coding conventions and your webpage show up in a mad jumbo. Why I don't know, all I know is how to implement some inconvenient but absolutely necessary CSS hack to make sure everything shows up at least close to how it is suppose to look in Firefox and Opera (I mostly use the underscore '_' hack and star html '* html' hack for IE 6.0).

To my great relief, when I typed in http://www.blogcrowds.com in the IE 7.0 address bar, my site Blogcrowds.com showed up fine if not better in IE 7.0. That, I give my thanks Bill Gates :).

I guess the reason that I forgot about testing my site for IE 7.0 and not testing when I got IE 7.0 Beta was because I thought most users will still be using IE 6. My initial thought, perhaps influenced by some 'internet browser trend analyst', was that IE 7.0 will be shipped with Windows Vista sometimes in early 2007 but most users who does not switch to Vista will still be stuck with IE 6.0 for another couple of years and still taking up most of browser population. Now it looks like IE 6.0 will be obsolete sooner than I expected (hopefully), which is a very good thing and I could stop worrying about hacks :D. Something else I will be looking forward to is the 'new' age of online images with .PNG for better qualities and transparency (which isn't really recommended because IE 6.0 does not render transparent .PNG properly). And again, thanks to Bill Gates.

I am happy to announce that Blogcrowds.com has launched its own directory at http://www.blogcrowds.com/directory/. Feel free to add your blogs to our directory, it however does require a recipical link as our directory is not a 'no-follow' one like many other directories and every link included in the directory goes toward Page Rank as well. Thanks.

Over the next period of time we will also look for some feedback on the directory, categories etc. So please post your comments about the directory in the feedback forum. Thanks again

I have a request for a four blogger template (see it here). So I sat down today and tried my hands at his. You can go to http://blogcrowds.blogspot.com/ to see my progress so far.

If you have any similar request/changes feel free to visit Blogcrowds forums and get in touch :)

I have finally had time to sit down and modify some Blogger Beta Templates. Today, I did all the Rounders template so all the new blogger features are included with labels and everything. You can also see the Rounders 2 template at work at http://point23.blogspot.com/ and Rounders 4 template at http://blogcrowds.blogspot.com/. If you wish to use this and other templates free please click here.

Tommorrow I will probably modify the 565 and 897 templates than maybe the rest of the Blogger Templates or finally converting my own templates. Thanks :)