Blogger Templates

Sidebar sliding to the bottom of the page is probably the biggest problem bloggers have with layout coding. This problem usually occur when an image or link is taking up more room than its suppose to; without enough space, the sidebar slide down the page. So, to solve this problem, usually people would recommend finding out which image or link is causing the problem and
remove it. However, there are two CSS methods that could solve this problem and they may be easier than going through a huge amount of content to find an image or a link.


Method One: Word Break

word-wrap: break-word;

add the above to the container, usually main content and sidebar column

This method is used in all blogger beta templates, as it suggests and as commented in the templates it "fix for long text breaking sidebar float in IE". It will break long text and links, but it won't work on images.


Method Two: Overflow

overflow:auto;

or

overflow:hidden;

add the above using either option auto or hidden to the container, usually main content and sidebar column

This property controls how overflows are rendered in a web browser for all overflowing content, link, images, and anything else. With first option auto, if anything is larger than its container, the container itself won't expand, however a scroll will appear in the container so if want to see the
entire image or link, you can scroll across as you can see in the second post at Blogcrowds Forum. The second option hidden, will tell the browser not render anything overflowing its container so part of the image or link will be cut off.

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.

This is the first of what I hope to be a series of entries about various important CSS elements essential in blogger templates. So I am going to start with the ever present background element

Why Use Background
There are basically two ways to insert an image into HTML, one by applying the image as foreground using <img> tag or background using background CSS style. Generally you would use background if there will be text on top of the image or the image is very small and part of the decorative element. Otherwise, for the content of your web page use the <img> tag.

Background Properties
There are five basic background properties:

Background Color - color hex / color rgb / color name / transparent
The default property is transparent. The other three choices are different ways to express color on the web. An example of hex is #000000 or #000, rgb is rgb(0,0,0), color name is black. Background color is often used in combination with background image to save image size.

Background Image - url / none
The default value for background image is none. The url property is used to link the background image to an existing picture.

Background Repeat - repeat / repeat-x / repeat-y / no-repeat
As the name suggests background repeat determines if the image applied to the background should repeat or not. This property is also used to save image size and can be seen in Neuschwanstein where the entire background is a repeated tile. The default property is repeat while the three other value are pretty self explainatory repeat-x mean repeat along the x axis (left-right only) repeat-y mean the y axis (up-down only) and no-repeat means no repeat.

Background Attachment - scroll / fixed
The default property is scoll which means the background image will scroll with the scroll bar while with the fixed property the image will always remain on the screen no matter how far down the screen you go.

Background Position - top left / top center / top right / center left / center center / center right / bottom left / bottom center / bottom right / x-% y-% / x-pos y-pos
The background position is used in combination with your background image, it dictates where the image will start. The values it take are listed above and the numerical values goes left-right first then top-bottom.


Finally there is the Background: property is self, it takes all of the above background properties recommended in the order they are listed, saving a lot of precious time :)