So with that little disclaimer out of the way, here’s my take on the rather excellent YAML CSS framework, and my first foray into using it to layout a site.

First things first; YAML seems to be very well thought out. It claims to be cross browser compliant in almost every browser that’s still in use by more than one man and his dog, and it fixes most of the major problems web developers run into with the older browsers.

Unlike YUI and some of the other Frameworks you’ll need to download the css files etc. and host them yourself. These can all be downloaded from here.

YAML lets you get off to a flying start without any real work creating css reset files etc. After slicing and dicing a design I’ve been working on for a week I managed to get a site up and running cross-browser on the first attempt. This seems to happen very rarely for me. I’ll admit there were a few tweaks here and there to make it perfect, but overall it just worked.

It’s got a few default styles that are well thought out and I’m already finding myself duplicating them in other projects I work on that don’t use YAML. I’ll cover details of some of these styles and a bit more on how to use the framework in later posts.

selector {
min-height:500px;
height:auto !important;
height:500px;
}

This takes advantage of two IE6 bugs:

1. IE6 ignores the !important and sets the height using the last line.
2. IE6 treats height like it should treat min-height and lets child objects cause the parent to expand.

I found this helpful solution here.

The basic principle is pretty simple.

• Make the body 100% tall no matter what.
• Give it a negative bottom margin the size of your footer.
• Move you footer up into the space left by the bottom margin

There’s a few other steps to make it work cross-browser (ie6+) but that’s basically it.

I found the solution here.

This is an odd problem. You have a perfectly normal search box with a go button next to it – a classic layout some might say. The problem is that the go button seems to sit about half-way up the side of the search box. Now, having tried to fix css/html problems cross-browser before, I was fully expecting to spend a few hours looking for solutions trying them in FF, IE etc. and then mixing and matching my perfect solution… In this case I was stopped short… Very short in fact. The fix is simple as adding a position:absolute to the button. Problem solved. See here for where I found the fix.

Images naturally sit on the baseline. This means that they’re about 4px up from the bottom normally. Setting vertical-align: bottom or display:block seems to clear it.

The solution for this was found here.

When centering an absolutely positioned element horizontally you have to specify the left and right properties as zero for this to work!

I found the solution here but I thought I’d note it down for all those people that may not have come across this themselves. Somehow it seems to have passed me by…

Auto-margins can center an absolutely positioned element inside its containing block.

For this to work, you have to

• specify the offset properties (of opposite sides) with same values, i.e. by setting left:0; right:0; for horizontal centering and top:0; bottom:0; for vertical centering,
• set dimensions along the axis you want to center along,
• enable auto-margins along the axis you want to center along.

Internet Explorer note: IE6 can not relate absolutely positioned elements to opposite sides of containing block, so only one of the offset properties is used. This brings the element out of balance and renders auto-margins useless.

I hope someone finds this useful…