Please have a look 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.
+1
A:
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.
Oli
2010-03-26 15:02:12
Unfortunately the method with setting floating style to left didn't work. I tried setting that image a background and it works well but the problem is that when I need to place other images, e.g. buttons, I still have the same problem.
Sergey Basharov
2010-03-26 15:17:19
It is a content image - so inserting it with img is ok.
easwee
2010-03-26 15:17:35
Oh sorry, I tried that one more time and it works well now!Though it's strange why I need to make that code to make it look properly.Anyway now it works, thanks so much.
Sergey Basharov
2010-03-26 15:20:16
If you check my answer you will understand it :)
easwee
2010-03-26 15:21:04
+1
A:
what i do at the beginning of each css sheet is adding this
*{
padding:0px;
margin:0px;
}
this removes all default spaces, might help.
djerry
2010-03-26 15:09:38
+1
A:
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.
easwee
2010-03-26 15:19:16
Alternatively if you absolutely have to have an inline image, you can set line-height to 0 to control that added space.
Ben Delarre
2010-03-26 15:23:06