1

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.

Sergei Basharov
  • 51,276
  • 73
  • 200
  • 335

3 Answers3

1

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
  • 235,628
  • 64
  • 220
  • 299
  • 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. – Sergei Basharov Mar 26 '10 at 15:17
  • It is a content image - so inserting it with img is ok. – easwee Mar 26 '10 at 15:17
  • 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. – Sergei Basharov Mar 26 '10 at 15:20
  • If you check my answer you will understand it :) – easwee Mar 26 '10 at 15:21
1

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

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

this removes all default spaces, might help.

Terry
  • 5,132
  • 4
  • 33
  • 66
1

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
  • 15,757
  • 24
  • 60
  • 83