html vertical space between blocks appears

Please have a loo开发者_StackOverflow社区k at this page www.pixeli.ca/issue. I have begun making a page layout using CSS framework 960.gs. My problem is that there is some strange space appears between block with top image and blue block with "hello" string. So you can see a green stripe there that shouldn't be visible at all. I tried different variants and have no idea what's wrong with it. I noticed that it happens only with the block with images inside them, but if there is only text, no space happens. Thanks.

Simply adding float:left to the image fixes it.

<img src="imagetop.png" style="float: left;"/>

Not quite sure why or if there's a slightly more accurate method but hey, there you are.

Actually: why don't you set a background-image and height on the container. That would be a much cleaner way of doing things.

what i do at the beginning of each css sheet is adding this

*{
     padding:0px;
     margin:0px;
}

this removes all default spaces, might help.

The image is inline and is treated as text - so it gets aligned to baseline which adds a bit of space under it as a normal line would do.

set image to display:block and it should work.